Question

我有D3js topojson visualisation。 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

首先，在双击上打开 PAGE：

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'大写请求新的选项卡/窗口，但这取决于浏览器默认和自定义首选项。

Answer 2

我发现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); });
});

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

2 个答案: