如何将首选项应用于d3.tree节点

时间:2017-05-21 01:21:18

标签: javascript html d3.js

我已经改编了

的代码

https://bl.ocks.org/mbostock/4063550

为分层节点的整洁排列做一个很好的数字。假设我有一个类似于网页上的flare.csv文件。现在,代码根据节点是在内部圆上(这意味着节点有两个链接)还是在外圆上来分配颜色。

我想要的是将特定颜色(让我们说蓝色)分配到位于名称为flare的中心(父节点)的点。另外,我想为所有外圈节点(那些只有一个连接)指定一个特定的颜色(让我们说红色),其名称是" sub"。

所有其他节点可能只是黑色。

如何在HTML代码中实现我想要的内容?

1 个答案:

答案 0 :(得分:0)

您可以在为圈子设置样式时检查父母和孩子:

node.append("circle")
    .style("fill", function(d) {
        return !d.parent ? "blue" : d.children ? "red" : "black";
    })
    .attr("r", 2.5);

以下是您的更新bl.ocks:https://bl.ocks.org/anonymous/696c1201ed63715753e76e480db343f0

编辑:仅为您指定的节点着色:

.style("fill", function(d){
    return !d.parent ? "blue" : d.data.id === "flare.vis.data" ? "red" : "black";
})

这是bl.ocks:https://bl.ocks.org/anonymous/b55bc1e54414b4bbbfebee93ac6912a4