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-color）：

  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";});

工作代码here。

希望这有帮助！

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

2 个答案: