D3.js d3矩形插值
我有大量行业的预测利润率数据集,即。 对于每个行业,我都有一个概率分布形式D3.js d3矩形插值,d3.js,D3.js,我有大量行业的预测利润率数据集,即。 对于每个行业,我都有一个概率分布形式 var data = [{'confidence': 0.0, 'rule': 'Agriculture', 'value': 45}, {'confidence': 0.052631578947368418, 'rule': 'Agriculture', 'value': 46}, {'confidence': 0.10526315789473684, 'rule': 'Agriculture', 'value'
var data = [{'confidence': 0.0, 'rule': 'Agriculture', 'value': 45},
{'confidence': 0.052631578947368418, 'rule': 'Agriculture', 'value': 46},
{'confidence': 0.10526315789473684, 'rule': 'Agriculture', 'value': 47},
{'confidence': 0.15789473684210525, 'rule': 'Agriculture', 'value': 48},
{'confidence': 0.36842105263157893, 'rule': 'Agriculture', 'value': 52},
{'confidence': 0.73684210526315785, 'rule': 'Information', 'value': 59},
{'confidence': 0.78947368421052633, 'rule': 'Machine Learning', 'value': 60},
{'confidence': 0.84210526315789469, 'rule': 'Machine Learning', 'value': 61},
{'confidence': 0.89473684210526305, 'rule': 'Machine Learning', 'value': 62},
{'confidence': 0.94736842105263153, 'rule': 'Machine Learning', 'value': 63}];
我需要在d3.js中重新创建下面的图,其中每个密度都被绘制为
作为条形图,线性色标描述概率
到目前为止,我的尝试包括将每个给定点绘制为高度为1的矩形元素:
var rect = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return x(d.rule) + margin.left;
})
.attr("y", function(d, i) {
return y(d.value)
})
.attr("width", 100)
.attr("height", 1) // change this !
.style("fill", function(d, i) {
return color(d.confidence);
});
正如你在下面所看到的,这种方法很有效,但我现在需要以某种方式插值矩形
以获得更平滑的可视化效果
我怎样才能做到这一点(或者我完全走错了道路)?做你想做的事情的一种方法是使用。对于每个条,您将定义一个梯度,其停止点对应于您的置信值(生成的方式与您现在生成矩形的方式大致相同)。然后,您所要做的就是绘制矩形,并将渐变作为填充指定给相应的矩形 我用这种技巧来填充“线条”