Question

我有一个使用C3js的散点图。

X轴具有相互作用的数量，Y轴是这些相互作用发生的日期/时间。

现在散点图适用于此数据。但现在我想更进一步，如果交互次数更多，那么节点是绿色的，如果交互次数较少，则它们是红色的。当相互作用密度从较小到较大时，颜色的缩放必须是渐变的。

以下是基本代码：

var chart = c3.generate({
point: {
    r: 5
},
data: {
    xs: {
        Safe: 'ibm_x',
        Losing: 'microsoft_x',
    },

    columns: [
        ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7],
        ["microsoft_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8],
        ["Safe", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5],
        ["Losing", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, ],
    ],
    type: 'scatter'
},
color: {
    pattern: ['#49B5A6', '#F86A52']
},
 axis: {
    x: {
        label: 'Interactions',
        tick: {
            fit: false
        }
    },
    y: {
        label: 'Days'
    }
},

}）;

以下是小提琴 - https://jsfiddle.net/npmarkunda/qx35z8n5/

我附加了预期结果的图像。

Answer 1

C3无法提供此功能。因此需要使用d3来完成它。

//on chart load
chart.load({done: function() {
      //merge the first two columns which decide the x axis. 
      var g = data[0].concat(data[1])
      //get the max min in the concatenated array
        var minmax = d3.extent(g.filter(function(d){ return !isNaN(d);}));
      //make ascale for color range
      //min is '#49B5A6'
      //max is '#F86A52'
      var color = d3.scale.linear()
        .domain(minmax)
        .range(['#49B5A6', '#F86A52']);
      //iterate each circle  
      d3.selectAll("circle")[0].forEach(function(c){
        var d1 = d3.select(c).data()[0];//get data for circle
        change color on timeout
        window.setTimeout(function(){d3.select(c).style("fill", color(d1.x))}, 500);

      });
    },});

工作示例here。

Answer 2

c3具有color配置，允许您指定一个函数来计算每个点的颜色。

我从Cyril的答案中大量借用并使用了这个配置选项：

var data = [
    ["ibm_x", 3.5, 3.0, 3.2, ...],
    ["microsoft_x", 3.2, 3.2, ...],
    ["Safe", 0.2, 0.2, 0.2, 0.2, ...],
    ["Losing", 1.4, 1.5, 1.5, ...],
];

// Get all the x values
var g = data[0].concat(data[1])

//get the max min in the concatenated array
var minmax = d3.extent(g.filter(function(d){ return !isNaN(d);}));

//make a scale for color range
//min is '#49B5A6'
//max is '#F86A52'
var heat = d3.scale.linear()
    .domain(minmax)
    .range(['#49B5A6', '#F86A52']);

c3.generate({
    data: {
        columns: data,
        ...
        color: function (color, d) {
            return heat(d.x);
        },
    },
    ...
});

在这里小提琴：https://jsfiddle.net/qx35z8n5/4/（再次根据西里尔的回答修改）

如何在此散点图中添加密度或热图？

2 个答案: