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

Question

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

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

Answer 1

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

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;
}