0

我使用 D3.js 生成树状图，用户将在其中看到聚类的结果。但是，为了保持显示干净，我希望父节点尽可能简单（没有文字，没有圆圈）。

这是当前显示数据的方式：http: //i.imgur.com/Cz52Fhl.png

这是我希望它显示的示例（方向无关紧要，重要的是内部节点没有文本或圆圈）：http: //i.imgur.com/Oo2A0b7.png

编码...

// Compute the new tree layout.
      var nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);

      // Normalize for fixed-depth.
      nodes.forEach(function(d) { d.y = d.depth * 130; });

      // Update the nodes…
      var node = svg.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });

      // Enter any new nodes at the parent's previous position.
      var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
          .on("click", click);

      nodeEnter.append("circle")
          .attr("r", 1e-6)
          .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

      nodeEnter.append("text")
          .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
          .text(function(d) { return d.canonical; })
          .style("fill-opacity", 1e-6);
4

1 回答 1

4

您是否希望能够在叶节点（最右边的那些）旁边添加标签，而任何中间节点都没有标签？

如果是，有一个活生生的例子：http ://bl.ocks.org/widged/5150104

节点是内部类型还是叶子类型由这部分代码定义

  .enter().append("svg:g")
        .attr("class", function(n) {
          if (n.children) {
            return "inner node"
          } else {
            return "leaf node"
          }
        })

然后

var endnodes =  vis.selectAll('g.leaf.node')
    .append("svg:text")
    ... skipping attributes ...
    .text(function(d) { return d.data.name; });
于 2013-03-13T08:04:23.523 回答