Question

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

如果值= 0，那么图表上那个/那个人的圆圈将是灰色的如果1＆lt;价值＆lt; 3然后图表上那个/那个人的圆圈将是黄色的如果4＆lt;价值＆lt; 10然后图表中那个/那个人的圆圈将是橙色的如果11＆lt;价值＆lt; 20然后图表中那个/那个人的圆圈将是黄色的

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

它在stratify（）函数中是.sc（function（d）{return 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：

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

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

1 个答案: