Question

我正在使用此处的代码：http://bl.ocks.org/1249394来获取此树形图。

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

Answer 1

基本上你需要一个可以用来告诉节点的属性。看起来有一个现有的父属性可用于确定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": [
        { ... } ... 
    ]
}

然后，您可以使用此属性修改节点，因为它正在被附加（这里我正在修改圆圈，但您可以对添加的文本执行相同操作）。请注意，我现在使用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;
}

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

1 个答案: