D3js: how to open a new tab after double clicking on an element?
On my dataviz, both the input polygon topojson and svg contain attributes name:"..."
and data-name="..."
respectively. In my D3js code, I have:
function click(a){console.log(a.properties.name);}
which successfully print the meaning of the name.
In addition to this, how can I add ** double click to open a new tab from the URL "http://en.wikipedia.org/wiki/"+a.properties.name
? **
Edit: Doubleclick will probably be on("dblclick", function(){...})
, but you might think of other ways as well. I also prefer to create the url from the properties.name file rather than saving it to SVG, which would make it uselessly cumbersome.
source to share
First, by opening PAGE on double click :
function dblclick(a){
window.location.assign("http://en.wikipedia.org/wiki/"+a.properties.name, '_blank');
}
you just add .on("dblclick", dblclick);
to your D3 item generator:
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 on your target).
Second, opening NEW TAB is known as depending on browser and user preference . The top '_blank'
asks for a new tab / windows, but this depends on the default browser settings and user preferences.
source to share
I found the window.open method (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); });
});
source to share