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

Question

在我的数据可视化中，输入 topojson 和 svg 多边形分别包含属性name:"..." 和data-name="..."。在我目前的 D3js 代码中：

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

成功打印出名称的值。

除此之外，我怎样才能添加**双击来打开一个带有"http://en.wikipedia.org/wiki/"+a.properties.name url的新标签？**

---

编辑：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

首先，打开一个双击页面：

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

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

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

它会起作用（如果您的目标上没有其他元素）。

其次，打开一个新标签is known as depending on the browser and user's preference。 '_blank' 上部要求一个新的选项卡/窗口，但这取决于浏览器默认和自定义首选项。