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

我正在使用这里找到的代码：这个树形图

---

如何仅更改根节点的大小？我希望根节点的大小与所有子节点的大小不同。如何做到这一点？

基本上，您需要一个可以用来区分节点的属性。看起来有一个现有的父属性可用于确定

节点

何时是

根节点。因此，如果节点没有父节点（即，它是根节点），则只需更改附加函数即可修改圆的半径

您可以在中看到一个工作示例

通常，如果要修改特定节点，可以向希望不同的节点添加新属性，如下所示：

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

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

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

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