d3 js d3.stratify（）如何处理新列

Question

为了在我的整齐树形图上对圆进行颜色编码，我使用了scaleThreshold（）函数。 我有名字（id）的第一列和值（sc）的第二列。 每个名称都有一个值。

如果值= 0，则的该圆/图表上的那些人将是灰色 如果1个<值< 3然后，该圆/图表上的那些人将是黄色 如果4 <值< 10则是圆/图表上的那些人是橙色 如果11 <值< 20则是圆/图表上的人会发黄

我现在很努力添加列“sc”。

是它的分层（）函数.SC（函数（d）{回报d.sc}？

圆圈则是彩色的，然后根据该值

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

任何建议？如何preceed 感谢

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

Answer 1

你必须使用d.data.sc：

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