D3矩形插值

Question

我預測利潤的數據集進行了大量的行業，即 每個行業我有形式

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

正如你可以看到這類作品的下面，但我現在需要以某種方式插入react 以獲得更加流暢的可視化。

我怎樣才能做到這一點（或者乾脆是我在錯誤的道路上）？

Answer 1

做你想做的一種方法是使用SVG gradients。對於每個欄，您可以定義一個帶有與您的置信度值相對應的止損的梯度（與您現在生成矩形的生成方式大致相同）。然後，你所要做的就是繪製矩形，並將梯度分配爲各自的填充。

我已經使用這種技術來填充「行」here。