javascript - 为气泡图设置特定颜色

Question

我想根据变量在气泡图的圆圈上设置特定的颜色。例如，我可以将所有气泡更改为红色，但不能更改每个气泡。我的条件是 d 的一个属性，它由我的 JSON 的内容定义。

node.append("circle")
        .attr("r", function(d) { return d.size; })
        .style("fill", "red"); // all my bubble are red but the condition doesn't works
        /* 
        if (condition) {
          .style("fill", "red");
        } else {
          .style("fill","green");
        }
        */

这是 Plunker 元素:https://plnkr.co/edit/07RZFQoBrBz2xWxmiCl0?p=preview谢谢。

Answer 1

这是正确的语法:

.style("fill", function(d){
              if (d.size <= 20){
                return "green"
              } else if (d.size <= 40){
                return "orange"
              } else if (d.size <= 70){
                return "blue"
              } else {
                return "red"
              }
            });

我写了<=只是为了获得一些间隔，但你可以按照你想要的方式改变它。并使用 else if您可以设置任意数量的条件。

这是 Plunker:https://plnkr.co/edit/Q2reQnEFTcL58xNseYXl?p=preview