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()的工作原理，与您的域相比，该范围内需要更多的值才能达到预期的效果。可以将其视为带有刻度的值：介于两者之间的一切都是所需的颜色。如果您正好在刻度线上，它将转换为下一种颜色，所以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>

将特定颜色设置为气泡图

3 个答案: