链接在湿陷性树D3.js [英] LINKS IN Collapsible Tree in D3.js

问题描述

我是新来D3，所以我想弄清楚一些事情之后在这棵树的布局例子（ http://bl.ocks.org/mbostock/4339083 ）。

I am new to D3 so I want to figure out some of the following things in this tree layout example(http://bl.ocks.org/mbostock/4339083) .

1. 如何添加名称为链接（边缘）即如果从A到B（B是A的孩子）的链接然后显示B对链接的名称。


2. 如何更改基于在儿童中给出的尺寸的链接的宽度，即如果有一个从A到B和B的大小的链接50然后该链接的宽度应50像素。

请帮我解决这些问题，因为我无法理解它必须做的方式。

Please help me solve these problems as i'm not able to understand the way it has to be done.

感谢您。

推荐答案

有关的标签，您需要添加文本元素的链接路径：

For labels, you need to append text elements to the link paths:

link.enter().insert("text", "g")
  .attr("x", function(d) { return (d.source.x+d.target.x)/2; })
  .attr("y", function(d) { return (d.source.y+d.target.y)/2; })
  .text(function(d) { return d.target.name; });

您可能需要调整标签的位置。

You may want to adjust the label positions.

要更改链接的宽度，你需要设置路径的笔画宽度属性：

To change the width of the link, you need to set the stroke-width attribute of the path:

link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("stroke-width", function(d) { return d.target.size; })
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  });

这篇关于链接在湿陷性树D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！