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

Question

How do I return a color based on the max and minimum of the values using C3JS and D3JS? How do I return a color based on the max and minimum of the values using C3JS and D3JS?

Example for all values below 50% of the total of values set green and for 50% plus set red.

I'm trying to do a scatterplot with threshold features.

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

Below is the fiddle -

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

Answer 1

You could do something like this.

1) Work out the average of your data

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

2) Use the average when setting the color

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

Answer 2

You can do it this way first calculate the average:

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

Then use this to color the nodes( 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"
      };
    },

You don't need the code below:

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

Working code here .

Hope this helps!