javascript - 仅更改树结构根节点的大小

Question

我正在使用此处找到的代码：http: //bl.ocks.org/1249394用于此树形图。

如何仅更改根节点的大小？我希望根节点的大小与所有子节点的大小不同。我该怎么做呢？

Answer 1

基本上，您需要一个可以用来区分节点的属性。看起来有一个现有的父属性可用于确定 a 何时node是root. 因此，如果节点没有父节点（即它是根节点），您只需要更改附加函数来修改圆的半径。

nodeEnter.append("svg:circle")
  .attr("r", function(d) { return !d.parent ? 8.5 : 4.5; })
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
  .on("click", click);

您可以在http://bl.ocks.org/3767443看到一个工作示例。

一般来说，如果你想修改特定的节点，你可以向你想要不同的节点添加一个新属性，如下所示：

{
    "name": "MAT",
    "root": true,
    "children": [
        { ... } ... 
    ]
}

然后，您可以使用此属性在添加节点时对其进行修改（这里我正在修改圆圈，但您可以对添加的文本执行相同的操作）。请注意，我现在不是将圆的大小硬编码为 4.5，而是使用该root属性来使根节点更大。

nodeEnter.append("svg:circle")
    .attr("r", function(d) { return d.root ? 8 : 4.5; })
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
    .class(function(d) { return d.root ? 'root-node' : 'normal-node'; })
    .on("click", click);

如果你还像我上面那样设置类，那么你可以使用 CSS 来设置你的根节点的样式：

.root-node {
  cursor: pointer;
  fill: #fff;
  stroke: green;
  stroke-width: 3.5px;
}