0

我有大量行业的预测利润率数据集，即对于每个行业，我都有以下形式的概率分布

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

正如您在下面看到的这种作品，但我现在需要以某种方式插入矩形以获得更平滑的可视化。

不平滑

我怎样才能做到这一点（或者我完全走错了路）？

4

1 回答 1

1

做你想做的事情的一种方法是使用SVG gradients。对于每个条，您将定义一个渐变，其停止点对应于您的置信度值（生成方式与您现在生成矩形的方式大致相同）。然后您所要做的就是绘制矩形并将渐变分配为各自的填充。

我已经使用这种技术来填充这里的“线条” 。

于 2013-03-13T12:13:45.437 回答