javascript - d3.js 通过 dbclick 事件打开新选项卡

Question

我对 d3 还很陌生。我使用下面的代码根据 d3 网站中的示例对我的投资组合项目进行网络类型分析。现在我正在寻找一种在圆圈上添加双击事件的方法，该事件会打开一个新选项卡并转到相应的网址。我已经尝试过这些，但到目前为止还无法成功。

double click event on node

open new tab after doubleclick on element

非常感谢任何帮助。

var links = [
  {source: "Not Another one", target: "Respond", type: "solid", url:'https://www.wikipedia.org/'},
  {source: "Not Another one", target: "Pause", type: "link", url:'https://facebook.com/'},
  {source: "Who Steals Bikes?", target: "Respond", type: "solid", url:'https://www.yahoo.com/'},
  {source: "Who Steals Bikes?", target:  "Pause", type: "link", url:'https://www.google.com/'},
  {source: "Toward a Moving Structure", target: "Respond", type: "link", url:'https://www.github.com/'},
  {source: "Why Tall?", target: "Respond", type: "link", url:'http://www.mahanmehrvarz.name/'}
  ];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 1000,
    height = 600;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(150)
    .charge(-300)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["suit", "solid", "link"])
  .append("path")
     .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("g").selectAll("path")
    .data(force.links())
  .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
  .enter().append("circle")

    .attr("r", 6)
    .call(force.drag);

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
  .enter().append("text")
    .attr("x", 26)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
  path.attr("d", linkArc);
  circle.attr("transform", transform);
  text.attr("transform", transform);
}


function linkArc(d) {
  var dx = dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = 0
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

function transform(d) {
  return "translate(" + d.x + "," + d.y + ")";
}

Answer 1

我发现了这个例子，就像你说的:D3js: how to open new tab after doubleclick on element?

但有帮助的是:JavaScript: location.href to open in new window/tab?

关键代码:

window.open(
      htmlLinkHere,
      '_blank' // <- This is what makes it open in a new window.
    );

所以 onclick 就这样做:

.on('click', function(d) {
    console.log('open tab')
    window.open(
      'http://en.wikipedia.org',
      '_blank' // <- This is what makes it open in a new window.
    );
  });

我刚刚放置了一个 wiki 页面，但在您的示例中，该行将使用 d.url。

编辑

简单来说:

 .on('click', function(d) {
        console.log('open tab')
        window.open(
          d.url,
          '_blank' // <- This is what makes it open in a new window.
        );
      });

检查已实现的 fiddle (单击节点以在新选项卡中打开):http://jsfiddle.net/thatOneGuy/0nv4ck58/5/

编辑

你说你不希望它在节点上工作，那么你必须将数据传递到节点。即节点必须有 URL 数据。你可以这样做:

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, url:link.url});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, url : link.url});
});

但是，如果节点有多个链接，则 url 可能会发生冲突。现在您已经有了数据，只需将点击监听器添加到您的节点即可:

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
  .enter().append("circle")
 .on('click', function(d) {
            console.log('open tab')
            window.open(
              d.url,
              '_blank' // <- This is what makes it open in a new window.
            );
          });