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

【问题标题】：How to set color of node based on data value in D3JS如何根据 D3JS 中的数据值设置节点的颜色
【发布时间】：2015-12-23 05:42:50
【问题描述】：

如何使用 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/

【问题讨论】：

对于低于总值 50% 的所有值设置为绿色和 50% 以上设置为红色，示例是什么意思。并且您已经编写了 for 循环来计算不超过该数字 N 的自然数之和，您可能已经使用 (n)*(n+1)/2 来计算它。在找到值后，您只是根据 i%2 返回颜色，它会告诉您当前迭代索引是偶数还是奇数。

标签： javascript d3.js c3.js

【解决方案1】：

你可以这样做。

1) 计算数据的平均值

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

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

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

【讨论】：

【解决方案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.

希望这会有所帮助！

【讨论】：