Question

我想要一个带有曲线链接的力布局来表示一个有向图。另外，还需要用于节点和链接的工具提示。
通过引用Mike Bostock's example，曲线链接的目标通过使用称为“ bilinks”的数组来实现。但是，在为每个链接加入新的数据集“ bilinks”之后，链接的所有其他属性都丢失了，因此我无法在工具提示中显示链接的任何信息。
是否可以为链接加入另一个数据集？
关于节点和链接的代码如下：

  var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);   

  var nodes = graph.nodes,
      nodeById = d3.map(nodes, function(d) { return d.id; }),
      links = graph.links,
      bilinks = [];  

  links.forEach(function(link) {
    var s = link.source = nodeById.get(link.source),
        t = link.target = nodeById.get(link.target),
        i = {}; 
    nodes.push(i);
    links.push({source: s, target: i}, {source: i, target: t});
    bilinks.push([s, i, t]); 
  });

  var link = svg.selectAll(".link")
    .data(bilinks)  // Data join: join bilinks to make curve links...
    .enter()
      .append("g")
      .append("path")
      .attr("class", "link")
        .attr("marker-end", "url(#end)")
    //.on("mouseover", function(d) { ...
    // here I have no chance to get original link attributes...
    ; 

  var node = svg.selectAll(".node")  
    .data(graph.nodes.filter(function(d) { return d.id; }))
    .enter()
    .append("g")
    .attr("class", "node")
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
   );

   node.append("circle")      
      .attr("r", function(d){
          if(d.id == center_id){ return 15; }
          else{ return 5; }
      })
      .attr("fill", function(d) { return color(d.group); })
      .on("mouseover", function(d) { //Tooltips for nodes
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html(d.id + "<br/>" + d.group)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       })
     .on("mouseout", function(d) {
       div.transition()
         .duration(500)
         .style("opacity", 0);
       });

Answer 1

您只需将原始对象本身推入bilinks ...

bilinks.push([s, i, t, link]);

...，您可以将其作为基准数组中的第四个对象：

link.on("mouseover", function(d){
    console.log(d[3])
});

以下是Bostock的代码：http://blockbuilder.org/GerardoFurtado/6e849f33c828a9cac7037a4786f83766

如何制作曲线链接并同时在链接上添加工具提示？

1 个答案: