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.
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); });
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With