Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3js: how to open new tab after doubleclick on element?

Tags:

d3.js

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.

like image 746
Hugolpz Avatar asked Aug 23 '14 11:08

Hugolpz


2 Answers

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); });
});
like image 53
CBunyea Avatar answered Nov 10 '22 19:11

CBunyea


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.

like image 5
Hugolpz Avatar answered Nov 10 '22 19:11

Hugolpz