为气泡图设置特定颜色

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

您的条件代码不起作用的原因是它破坏了链接，例如：

d3.select(selector)
.attr()
.style()
.append()

您可以在保持链接的同时使用条件：

.style("fill", condition ? "red" : "green")

如果条件多于两个，为了功能和可读性，我们创建一个函数。

function color(condition) {
  switch (expression) {
    case redCondition:
      return "red"
      break;
    case blueCondition:
      return "blue"
      break;  
    default:
      return "green"
  }
}

.style("fill", color(condition))

Answer 2

这是正确的语法：

.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

Answer 3

要针对任意数量的条件编写此代码，您可以使用 threshold scale。就像我们使用比例将数据值映射到 x 和 y 值一样，我们可以使用比例将数字转换为颜色。

阈值尺度将值映射到离散范围，并将域的子集映射到这些离散值：

colorScale = d3.scaleThreshold()
    .domain([20, 40, 70])
    .range(["green", "orange", "blue", "red"]);

由于 scaleThreshold() 的工作原理，您需要在范围内比在您的域中多一个值才能达到预期效果。把它想象成带有刻度的值：所有 in-between 都是所需的颜色。如果你正好在一个刻度上，那么它将转换为下一种颜色，所以 colorScale(20) === "orange".

green | orange | blue | red 
      20       40     70

var colorScale = d3.scaleThreshold()
    .domain([20, 40, 70])
    .range(["green", "orange", "blue", "red"]);

console.log('colorScale(0):', colorScale(0))
console.log('colorScale(20):', colorScale(20))
console.log('colorScale(30):', colorScale(30))
console.log('colorScale(60):', colorScale(60))
console.log('colorScale(70):', colorScale(70))
console.log('colorScale(100):', colorScale(100))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

为气泡图设置特定颜色

Set a specific color to a bubble chart

javascript

css

bubble-chart

colors

d3.js