6

On my dataviz, both the input topojson and the svg polygons contains an attributes name:"..." and data-name="...", respectively. In my D3js code I currently have :

function click(a){console.log(a.properties.name);}

which successfully print out the name's value.

In addition to this, how could I add a **double click to open a new tab with the url "http://en.wikipedia.org/wiki/"+a.properties.name ?**

Edit: Doubleclick is likely to be on("dblclick", function(){...}), but you may think to other ways. I also prefer to build the url from the properties.name rather than store it into the SVG, which will make it uselessly heavier.

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • http://www.w3schools.com/js/js_window_location.asp – Lars Kotthoff Aug 23 '14 at 17:34
  • @LarsKotthoff: On the track, thanks ! – Hugolpz Aug 23 '14 at 17:40
  • Thanks, answer documented (if it wasn't already !) – Hugolpz Aug 23 '14 at 18:21
  • This is a duplicate of http://stackoverflow.com/questions/5141910/javascript-location-href-to-open-in-new-window-tab. I voted to close (but as a duplicate of a different question, because I found that one first, but the question I linked to in this comment is a better match). – 11684 Aug 23 '14 at 18:37

2 Answers2

7

I found the window.open method works (in the oncick below).

vis.selectAll("text")
      .data(nodes)
    .enter().append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
      .text(function(d) { return d.name; })
      .on("click",function(d){
          window.open(d.url, '_blank')});

      d3.select(window).on("click", function() { zoom(root); });
});
CBunyea
  • 71
  • 1
  • 1
5

First, opening a PAGE on doubleclick :

 function dblclick(a){
    window.location.assign("http://en.wikipedia.org/wiki/"+a.properties.name, '_blank');
 }

you then simply add .on("dblclick", dblclick); in your D3 element generation :

 svg.append("g")
    .attr("class", "L0" )
  .selectAll(".countries")
    .data(topojson.feature(world, world.objects.admin_0).features) 
  .enter().append("path")
    .attr("data-name-en", function(d) { return d.properties.name; })
    .style("fill", "#E0E0E0")
    .attr("d", path)
    .on("dblclick", dblclick);

and it will work (if no other element is upon your target).

Secondly, opening a NEW TAB is known as depending on the browser and user's preference. The '_blank' upper ask for a new tab/windows, but this depend on the browser default and custom preferences.

Community
  • 1
  • 1
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • 1
    Actually this never works for me. However the window.open(url,'_blank'); window.open(url); (see this answer too http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-using-javascript?lq=1) – magicrebirth Aug 30 '15 at 11:31