javascript - d3 js d3.stratify() how to handle a new column -

in order color code circle on tidy tree chart using scalethreshold() function. have first column name (id) , second column values (sc). each name has 1 value.

if value = 0 circle of that/those person on chart grey if 1 < value < 3 circle of that/those person on chart yellow if 4 < value < 10 circle of that/those person on chart orange if 11 < value < 20 circle of that/those person on chart yellow

i struggling add column "sc".

is in stratify() function .sc(function (d) {return d.sc}?

the circle colored depending on value

node.append("circle")           .attr("r", 3.5)            .style("fill", function(d) { return color(sc.value) }); 

any suggestion on how preceed? thanks

<script>      var color = d3.scalethreshold()         .domain([1, 4, 11])         .range(["grey", "yellow", "orange", "green"]);      color(-1);   // "grey"     color(0);    // "grey"     color(1);    // "yellow"     color(3);    // "yellow"     color(4);    // "orange"     color(10);   // "orange"     color(11);   // "red"     color(20);   // "red"     color(1000); // "red"       var svg = d3.select("svg"),         width = +svg.attr("width"),         height = +svg.attr("height"),         g = svg.append("g").attr("transform", "translate(40,0)");      var tree = d3.tree()         .size([height, width - 160]);      var stratify = d3.stratify()           .parentid(function(d) { return d.id.substring(0, d.id.lastindexof(".")); });      d3.csv("flare.csv", function(error, data) {       if (error) throw error;        var root = stratify(data)           .sort(function(a, b) { return (a.height - b.height) || a.id.localecompare(b.id); });        var link = g.selectall(".link")         .data(tree(root).descendants().slice(1))         .enter().append("path")           .attr("class", "link")           .attr("d", function(d) {             return "m" + d.y + "," + d.x                 + "c" + (d.y + d.parent.y) / 2 + "," + d.x                 + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x                 + " " + d.parent.y + "," + d.parent.x;           });        var node = g.selectall(".node")         .data(root.descendants())         .enter().append("g")           .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })           .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })      node.append("text")           .attr("dy", 3)           .attr("x", function(d) { return d.children ? -8 : 8; })           .style("text-anchor", function(d) { return d.children ? "end" : "start"; })           .text(function(d) { return d.id.substring(d.id.lastindexof(".") + 1); });        node.append("circle")           .attr("r", 3.5)            .style("fill", function(d) { return color(sc.value) });       });      </script> 

you have use d.data.sc:

node.append("circle")     .attr("r", 3.5)     .style("fill", function(d) { return color(d.data.sc) });