如何向 d3 生成的力导向图的节点添加标题属性？答案

【问题标题】：How do I add a title attribute to the nodes of my force-directed graph generated by d3?如何向 d3 生成的力导向图的节点添加标题属性？
【发布时间】：2012-04-19 18:21:17
【问题描述】：

在 d3 演示 (http://goo.gl/lN7Jo) 之后，我正在尝试创建一个力导向图。我正在尝试向通过这样做创建的节点元素添加标题属性。

var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")

      // here is how I try to add a title.
      .attr("title", "my title")

      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

但是，我的图表的节点没有显示标题属性。这样做的正确方法是什么？谢谢。

【问题讨论】：

标签： javascript d3.js tooltip visualization force-layout

【解决方案1】：

在 SVG 中，title 属性实际上是描述其父级的元素，因此您必须遵循您链接的示例...

var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

node.append("title")
    .text("my text");

【讨论】：

为我工作。此外，您可以将节点的名称显示为标题。

【解决方案2】：

在初始化节点的正下方添加此代码。这将为每个节点添加一些硬编码文本作为标题。

node.append("title")
    .text("my text");

如果您想添加name 作为标题，请执行此操作；

node.append("title")
    .text(function (d) {
            return d.name;
        })

【讨论】：