Javascript 带重要星号的条形图
我是D3JS新手 我想创建一个简单的条形图,带有星号的重要性条形图,如下所示 我该怎么做呢?显然,我可以根据文档中的示例制作正常的条形图,但我在条形图/星号方面做得不够Javascript 带重要星号的条形图,javascript,d3.js,bar-chart,Javascript,D3.js,Bar Chart,我是D3JS新手 我想创建一个简单的条形图,带有星号的重要性条形图,如下所示 我该怎么做呢?显然,我可以根据文档中的示例制作正常的条形图,但我在条形图/星号方面做得不够 谢谢你做了这样的定制,我只需要自己画路径。例如,我在大约15分钟内完成了这项工作。请注意,我伪造了错误条计算,它假设第一条是最高的 svg.selectAll(".errorBar") .data(data) .enter() .append("path") .attr("d", funct
谢谢你做了这样的定制,我只需要自己画路径。例如,我在大约15分钟内完成了这项工作。请注意,我伪造了错误条计算,它假设第一条是最高的
svg.selectAll(".errorBar")
.data(data)
.enter()
.append("path")
.attr("d", function(d, i) {
var rV = "";
if (i === 0) {
rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + y(d.value);
rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - ((data.length - 1) * 25));
return rV;
}
var errorY = (y(d.value) - y(d.value) / 6);
rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + y(d.value);
rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + errorY;
rV += "M" + (x(d.letter) + x.rangeBand() * 0.25) + " " + errorY;
rV += "L" + (x(d.letter) + x.rangeBand() * 0.75) + " " + errorY;
rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (errorY - 10);
rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
rV += "M" + (x(firstValue.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
return rV;
})
.attr("stroke", "black")
.attr("stroke-width", 2)
svg.selectAll(".starText")
.data(data.filter(function(d,i){ return i > 0; }))
.enter()
.append('text')
.attr('dx',function(d,i){
return ((x(d.letter) + x.rangeBand()) / 2);
})
.attr('y', function(d,i){
return y(firstValue.value) - ((i+1) * 25);
})
.style('text-anchor', 'start')
.text('****')
例如
看起来像: