Question

我一直在使用网络图示例： https://bl.ocks.org/mbostock/4062045

我正在尝试将文本元素添加到节点上，但似乎无法让它出现在节点旁边。

我尝试在下面的函数中添加以下行，但这样做是为了显示屏幕左上角的文本 - 而我希望它出现在左上角。

不确定是否有人可以提供帮助？

var textElements = svg.append("g")
 .selectAll('text')
  .data(graph.nodes)
  .enter().append('text').attr('font-size', 15)
.attr('dx', 15)
.attr('dy', 4)
  .text(function(d) { return d.id; });

原件：

d3.json("miserables.json", function(error, graph) {
    if (error) throw error;

    var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); });



    var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); })
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

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

Answer 1

发现这个人解决了这个问题：

myText.attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });

https://plnkr.co/edit/UwQfPscQiOg87IEMYtET?p=preview

如何在D3.js中向强制有向图添加文本

1 个答案: