60

我一直在使用这个 d3 项目中的示例代码来学习如何显示 d3 图表，但我似乎无法在圆圈中间显示文本（类似于这个例子和这个例子）。我查看了其他示例并尝试添加

node.append("title").text("Node Name To Display")

和

node.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em").text("Node Name To Display")

在定义节点之后，但当我将鼠标悬停在每个节点上时，我看到的唯一结果是“要显示的节点名称”。它没有在圆圈内显示为文本。我是否必须编写自己的 svg 文本对象并根据圆的半径坐标确定它需要放置的坐标？从另外两个例子来看，d3 似乎已经以某种方式处理了这个问题。我只是不知道调用/设置的正确属性。

4

3 回答 3

108

有很多示例展示了如何为图形和树可视化添加标签，但我可能会从最简单的这个开始：

您尚未发布指向您的代码的链接，但我猜这node指的是 SVG 圆形元素的选择。您不能将文本元素添加到圆形元素，因为圆形元素不是容器；将文本元素添加到圆圈将被忽略。

通常，您使用 G 元素对每个节点的圆形元素（或图像元素，如上所述）和文本元素进行分组。生成的结构如下所示：

<g class="node" transform="translate(130,492)">
  <circle r="4.5"/>
  <text dx="12" dy=".35em">Gavroche</text>
</g>

使用数据连接为每个节点创建 G 元素，然后使用selection.append为每个节点添加一个圆圈和一个文本元素。像这样的东西：

var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 4.5);

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

这种方法的一个缺点是您可能希望将标签绘制在圆圈的顶部。由于 SVG 还不支持 z-index，所以元素是按文档顺序绘制的；因此，上述方法会导致将标签绘制在其 circle 上方，但它可能会绘制在其他circle 下方。您可以通过使用两个数据连接并为圆圈和标签创建单独的组来解决此问题，如下所示：

<g class="nodes">
  <circle transform="translate(130,492)" r="4.5"/>
  <circle transform="translate(110,249)" r="4.5"/>
  …
</g>
<g class="labels">
  <text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
  <text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
  …
</g>

以及相应的 JavaScript：

var circle = svg.append("g")
    .attr("class", "nodes")
  .selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .attr("r", 4.5)
    .call(force.drag);

var text = svg.append("g")
    .attr("class", "labels")
  .selectAll("text")
    .data(nodes)
  .enter().append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

移动专利诉讼示例中使用了此技术（带有用于创建白色阴影的附加文本元素）。

于 2012-06-19T21:35:05.950 回答
2

我发现本指南在尝试完成类似的事情时非常有用：

https://www.dashingd3js.com/svg-text-element

基于上面的链接，此代码将生成圆形标签：

<!DOCTYPE html>
<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<body style="overflow: hidden;">
<div id="canvas"  style="overflow: hidden;"></div>

<script type="text/javascript">

    var graph = {
        "nodes": [
            {name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
            {name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
            {name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
        ]
    }

    $( document ).ready(function() {

        var width = 2000;
        var height = 2000;

        var svg = d3.select("#canvas").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g");

        var lines = svg.attr("class", "line")
                .selectAll("line").data(graph.nodes)
                .enter().append("line")
                .style("stroke", "gray") // <<<<< Add a color
                .attr("x1", function (d, i) {
                    return d.x
                })
                .attr("y1", function (d) {
                    return d.y
                })
                .attr("x2", function (d) {
                    return findAttribute(d.connected).x
                })
                .attr("y2", function (d) {
                    return findAttribute(d.connected).y
                })

        var circles = svg.selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .style("stroke", "gray")
                .style("fill", "white")
                .attr("r", function (d, i) {
                    return d.r
                })
                .attr("cx", function (d, i) {
                    return d.x
                })
                .attr("cy", function (d, i) {
                    return d.y
                });

        var text = svg.selectAll("text")
                                .data(graph.nodes)
                                .enter()
                               .append("text");

        var textLabels = text
          .attr("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; })
          .text( function (d) { return d.name })
          .attr("font-family", "sans-serif")
          .attr("font-size", "10px")
          .attr("fill", "red");

    });

    function findAttribute(name) {
        for (var i = 0, len = graph.nodes.length; i < len; i++) {
            if (graph.nodes[i].name === name)
                return graph.nodes[i]; // Return as soon as the object is found
        }
        return null; // The object was not found
    }


</script>
</body>
</html>
于 2014-09-22T22:22:44.373 回答
2

如果您想扩大节点以适应大标签，您可以在绘制完 SVG 文本节点后使用它的 getBBox 属性。对于具有固定坐标和两种可能形状的节点列表，我是这样做的：

nodes.forEach(function(v) {
  var nd;
  var cx = v.coord[0];
  var cy = v.coord[1];

  switch (v.shape) {
    case "circle":
      nd = svg.append("circle");
      break;
    case "rectangle":
      nd = svg.append("rect");
      break;
  }

  var w = 10;
  var h = 10;
  if (v.label != "") {
    var lText = svg.append("text");

    lText.attr("x", cx)
         .attr("y", cy + 5)
         .attr("class", "labelText")
         .text(v.label);

    var bbox = lText.node().getBBox();
    w = Math.max(w,bbox.width);
    h = Math.max(h,bbox.height);
  }

  var pad = 4;

  switch (v.shape) {
    case "circle":
      nd.attr("cx", cx)
        .attr("cy", cy)
        .attr("r", Math.sqrt(w*w + h*h)/2 + pad);
      break;
    case "rectangle":
      nd.attr("x", cx - w/2 - pad)
        .attr("y", cy - h/2 - pad)
        .attr("width", w + 2*pad)
        .attr("height", h + 2*pad);
      break;
  }

});

请注意，添加了形状，添加了文本，然后定位了形状，以便让文本显示在顶部。

于 2014-12-25T20:10:35.973 回答