D3 4.0图与有向边和标签

D3 4.0 Graph with directed edges and labels

本文关键字：标签 D3      更新时间：2023-09-26

我试图用d3 (v4.0)创建一个图形，该图形具有节点的有向边和标签，类似于这样:http://jsfiddle.net/chrisJamesC/HgHqy/但具有较新版本的d3。

这就是我到目前为止所拥有的:https://jsfiddle.net/4nu57pgn/1/但我似乎无法弄清楚如何告诉D3使边缘在视觉上显示(带箭头)或显示节点id。

var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
svg = svg.call(d3.zoom().on("zoom", zoomed)).append("g");
var color = d3.scaleOrdinal(d3.schemeCategory10);
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
function createGraph (error, graph) {
  if (error) throw error;
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke", function(d) { return color(d.type); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 10)
      .attr("fill", function(d) { if (d.root == "true") return color(d.root); return color(d.type); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  node.on("click",function(d){
    console.log("clicked", d.id);
  });
  node.append("title")
      .text(function(d) { return d.id; });
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);
  simulation.force("link")
      .links(graph.links);
  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
}
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
function zoomed() {
  svg.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ")" + " scale(" + d3.event.transform.k + ")");
}

我是D3的新手，如果有人能帮我指出正确的方向，我将不胜感激。

箭头

要在行尾添加箭头，需要使用SVG定义一个标记。只需要轻微的修改来更新d3 v3代码，以便在v4中做到这一点。您提供的示例设置了三个箭头定义(每种类型的关系一个)，但是要创建单个箭头定义，您可以使用以下命令:

svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 20)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

markerWidth, markerHeight, refX, refY的值是显著的，并决定了标记的位置-不幸的是，我不知道它们如何与viewBox或圆半径相互作用，所以这些是通过反复试验选择的。

不需要将标记捕获为变量，因为它将使用URL说明符引用，如下所示:

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
      .data(graph.links)
    .enter().append("line")
      .attr("stroke", function(d) { return color(d.type); })
      .attr("marker-end", "url(#arrow)");
<标题> 标签

同样，对v3代码稍加修改就可以了。文本标签需要单独附加到SVG，而不是作为节点的子节点，并在ticked函数中独立翻译。

设置标签:

var text = svg.append("g").attr("class", "labels").selectAll("g")
    .data(graph.nodes)
  .enter().append("g");
text.append("text")
    .attr("x", 14)
    .attr("y", ".31em")
    .style("font-family", "sans-serif")
    .style("font-size", "0.7em")
    .text(function(d) { return d.id; });

然后在力模拟滴答时将它们转换到正确的位置:

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

水平偏移量在设置标签时由x的值定义(在本例中为14)。

<标题> 一起
相关文章：