如何在D3JS中根据数据值设置节点的颜色

Question

如何使用C3JS和D3JS根据值的最大值和最小值返回颜色？如何使用C3JS和D3JS返回基于值的最大值和最小值的颜色？

所有值低于设置为绿色的值总数的50%和50%以上设置为红色的值的示例。

我正在尝试做一个具有阈值特征的散点图。

var data = [
        ["ibm_x", 35],
        ["ibm_y", 45],
        ["ibm_z", 145],
        ["ibm_a", 45],
        ["microsoft_x", 12],
        ["tcs", 20],
        ["sun", 25],
        ["infosys", 75],
        ["ibm_b", 35],
        ["ibm_c", 335],
        ["Mike", 2],
        ["Susan", 5],
        ["Neo", 75],
        ["Suraj", 15],
        ["Leon", 35],
        ["Glen", 5],
        ["Harris", 5],
        ["Tom", 65],
        ["Nayan", 5],
        ["Jhagan", 1],
    ];
var chart = c3.generate({
point: {
    r: 7
},
data: {
    xs: {
        Mike: 'ibm_x',
        Susan: 'microsoft_x',
        Glen: 'tcs',
        Harris: 'sun',
        Tom: 'infosys',
        Lear : 'oracle',
        Leon: 'ibm_y',
        Neo: 'ibm_z',
        Suraj: 'ibm_a',
        Nayan: 'ibm_b',
        Jhagan: 'ibm_c'
    },
    columns: data,
    type: 'scatter'
},
 axis: {
    x: {
        label: 'Interactions',
        tick: {
            fit: false
        },
        min: 1,
        max: 500
    },
    y: {
        label: 'Days',
        min: 1,
        max: 90
    }
},
legend: {
    show: false
}});
d3.selectAll(".c3-circle").style("fill", function(d, i) {
     abc = (d.x+d.value);
     function numberSum(N) {var total = 0;
for(var i = 1; i <= N; i++){
  total += i;
}
return total;}return i % 2 ? "#F86A52" : "#49B5A6";});

下面是小提琴-

https://jsfiddle.net/npmarkunda/hh1o9yLw/

Answer 1

您可以这样做。

1） 计算数据的平均值

var average = d3.mean(data.map(function(i){return i[1]})));

2） 设置颜色时使用平均值

if (d.value > average)
  return "#49B5A6"
else
  return "#F86A52"

Answer 2

您可以这样做，首先计算平均值：

var average = d3.mean(data.map(function(i) {
  return i[1]
}));

然后使用此选项为节点着色(http://c3js.org/reference.html#data-颜色）：

  data: {
    xs: {
      Mike: 'ibm_x',
      Susan: 'microsoft_x',
      Glen: 'tcs',
      Harris: 'sun',
      Tom: 'infosys',
      Lear: 'oracle',
      Leon: 'ibm_y',
      Neo: 'ibm_z',
      Suraj: 'ibm_a',
      Nayan: 'ibm_b',
      Jhagan: 'ibm_c'
    },
    //color the nodes
    color: function(color, d) {
      if (d.value > average) {
        return "#F86A52"
      } else {
        return "#49B5A6"
      };
    },

您不需要以下代码：

d3.selectAll(".c3-circle").style("fill", function(d, i) {
     abc = (d.x+d.value);
     function numberSum(N) {var total = 0;
for(var i = 1; i <= N; i++){
  total += i;
}
return total;}return i % 2 ? "#F86A52" : "#49B5A6";});

此处为工作代码。

希望这能有所帮助！