D3js:双击元素后如何打开新标签？

Question

我有一个D3js topojson可视化.topojson和svg多边形都包含一个属性name:"..."和data-name="...".我目前有:

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

哪个成功打印出名称的值.

我怎么能通过双击打开带有网址的新标签"http://en.wikipedia.org/wiki/"+a.properties.name？

---

编辑:Doubleclick可能是on("dblclick", function(){...}),但您可能会想到其他方式.我也更喜欢从properties.name构建url而不是将其存储到SVG中,这会使它变得无用繁重.

Answer 1

我发现 window.open 方法有效（在下面的 oncick 中）。

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); });
});

Answer 2

首先,在doubleclick上打开一个PAGE:

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

然后.on("dblclick", dblclick);,您只需添加D3元素生成:

 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);

并且它将起作用(如果目标上没有其他元素).

其次,打开新TAB 被称为取决于浏览器和用户的偏好.在'_blank'上要求一个新的标签/窗口,但是这依赖于浏览器的默认和自定义选项.