Question

我对d3很新。我使用下面的代码根据d3网站中的示例制作我的投资组合项目的网络类型。现在我正在寻找一种方法来在圈子上添加双击事件，打开一个新选项卡并转到相应的URL。我尝试过这些但是到目前为止还没能做到。

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

检查已实施的小提琴（单击要在新标签中打开的节点）：http://jsfiddle.net/thatOneGuy/0nv4ck58/5/

修改

你说你想要在节点上工作，然后你必须将数据传递给节点。 I.E节点必须有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});
});

但是，如果节点有多个链接，那么网址可能会发生冲突。现在，您只需将数据添加到节点中即可获得数据：

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

d3.js通过dbclick事件打开一个新选项卡

1 个答案: