How to apply preferences to a d3.tree node

问题

I have adapted a code from

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

to make a nice figure for the tidy arrangement of layered nodes. Assume I have a similar flare.csv file as on the webpage. The code right now assigns color based on whether a node is on an internal circle (which means the node has two links) or on an outer circle.

What I want instead is to assign a specific color (let's say blue) to the point located in the center (the parent node) whose name is flare. Also I want to assign a specific color(let's say red) to all outer-circle nodes (those have only one connection) which name is "sub".

All other nodes could be only black.

How can I implement what I want in the HTML code?

回答1:

You can check for parents and children when styling the circles:

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

Here is your update bl.ocks: https://bl.ocks.org/anonymous/696c1201ed63715753e76e480db343f0

EDIT: colouring only your specified node:

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

Here is the bl.ocks: https://bl.ocks.org/anonymous/b55bc1e54414b4bbbfebee93ac6912a4

来源：https://stackoverflow.com/questions/44092303/how-to-apply-preferences-to-a-d3-tree-node