d3.js d3.stratify() 새 열을 처리하는 방법

Question

내 깔끔한 트리 차트에서 원을 색으로 지정하려면 scaleThreshold() 함수를 사용하고 있습니다. 이름 (id)이있는 첫 번째 열과 값 (sc)이있는 두 번째 열이 있습니다. 각 이름은 하나의 값을가집니다.

후 1 개 < 값 < 3 해당의 원/차트 그 사람이있을 것이다 이면 값 = 0이의 원/차트 그 사람 회색 경우 노란색 4 < 경우 값 < 10 그의 원/차트에 그 사람은 오렌지 될 것 11 < 값이 < 20 그의 원/차트에 그 사람이 나는 것을 추가 지금 고민하고

노란색 일 경우 열 "sc".

는 계층화() 함수를 그대로 .SC (함수 (d) {복귀 d.sc}?

원은 그 값

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

어떤 제안에 따라 다음 컬러한다

?

:보다 선행하는 방법에 대한 감사

<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을 사용해야합니다3210

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