在 d3.js 中向节点添加标签

Question

我是 d3.js 的新手

我正在尝试向我的节点添加标签。 但是无论我尝试什么都行不通.. 我的代码在这里：

http://jsfiddle.net/Ymtg5/1/

它是http://bl.ocks.org/christophermanning/4208494 之间的混搭 并强制有向图。 基本上我正在阅读一个 json 文件并创建上述图表。 现在我想向节点添加标签，就像http://bl.ocks.org/mbostock/950642 我尝试添加这些行

node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

但它不起作用。 任何帮助。建议.. 谢谢

Answer 1

问题很可能是您的 JSON 类没有“名称”。

对，不是这个问题

你的代码相关部分如下：

var node = svg.selectAll("path.node")
    .data(nodes)
    .enter().append("path").attr("class", "node")
    .style("fill", function(d) { return fill(d.value); })
    .style("stroke", function(d) { return d3.rgb(fill(d.value)).darker(); })
    .call(force.drag);

 // HERE should go node manipulation to add the text

force
    .nodes(nodes)
    .links(links)
    .on("tick", tick)
    .start();

function tick() {

  //node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; );
  node.attr("d", function(d) { return clip({"type":"F {"type":"Point","coordin...         
  link.attr("d", function(d) { return clip({"type":"Feature","geometry":{ ...

如果您想为节点添加标签，我已经在您的节点操作应该去的地方插入了一个注释行。您正在 tick 函数中执行此操作（好吧，我认为您正在尝试在那里执行此操作，代码不在小提琴中），并且该函数应该仅用于操作节点的 attr 。创建文本并将其附加到节点的位置在函数之外。