gpt4 book ai didi

javascript - 如何在 d3.js 中制作带有扩展网格的圆 Angular 条形图?

转载 作者:行者123 更新时间:2023-11-30 09:19:58 26 4
gpt4 key购买 nike

<分区>

我正在尝试使用 D3.js 创建条形图。条件是条形图应具有固定的宽度和条形之间的填充,并且应绘制在网格线的中心。

工具提示应在点击时显示一条垂直线

我能够用绘制的条形图创建网格线,不知何故 rx,ry 从两侧四舍五入。我怎样才能达到同样的结果。

var rectCluster = svg.selectAll(".bar")
.data(data);

rectCluster
.enter().append("rect")
.attr("class", function(d) {
return "bar";
})
.attr(attrs)
.attr({ry : (20), rx : 20 })
.attr("x", function(d) { return x(d.text); })
.attr("y", function(d) {
return height;
})
.style("fill", function(d) {
return color(d.text);
})
.attr("width", x.rangeBand())
.attr("height", 0)
.transition()
.duration(animationDelay)
.delay(function(d, i) {
return i * animationDelay;
})
.attr("y", function(d) { return y(d.score); })
.attr("height", function(d) { return height - y(d.score) });

var attrs = {
width: function(d, i){
return o.rangeBand();
},
height: function(d, i){
return yScale(d);
},
fill: "#384252",
x: function(d, i){
return xScale(i);
},
y: function(d, i){
return height - yScale(d) - margin.bottom;
}
};

Js Fiddle for the same

我正在努力实现这样的目标。 enter image description here

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com