gpt4 book ai didi

javascript - d3 可变长度过渡条形图

转载 作者:行者123 更新时间:2023-11-30 06:38:08 26 4
gpt4 key购买 nike

我有一个包含 8 个条的条形图。现在我想创建一个包含过渡的 10 个条形图。过渡效果很好,但我的新条形图也只有 8 个条。我的 html:

<html>
<head>
<title>TransitionTest</title>
<script src="d3.v2.js"></script>
</head>
<body>
<script src="TransitionTest.js"></script>
<button onclick="transitioning()">
Transition
</button>

</body>
</html>

我的脚本:

var data = [0,1,2,3,4,5,6,7];

var height = 500;
var width = 1000;
var svg = d3.select("body")
.append("svg")
.attr("class", "svg")
.attr("width", width)
.attr("height", height)

var xScale = d3.scale.linear()
.domain([0,10])
.range([0,width]);

var yScale = d3.scale.linear()
.domain([0,9])
.range([height,0])

var bar = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function (d,i) {
return xScale(i);
})
.attr("y", function (d) {
return yScale(d);
})
.attr("width", function (d,i) {
return (99);
})
.attr("height", function (d) {
return (height-yScale(d));
})
.attr("fill", "grey");

function transitioning() {
data = [8,6,4,2,0,9,7,5,3,1];
bar.data(data)
.transition()
.attr("x", function (d,i) {
return xScale(i/2);
})
.attr ("y", function (d) {
return yScale(d);
})
.attr("width", function (d,i) {
return (49);
})
.attr("height", function (d) {
return (height-yScale(d));
});
}

我做错了什么

最佳答案

您需要使用 enter() 选择添加新的条形图,这与您首先添加条形图的方式类似。因此,在您的函数 transitioning() 中,您需要进行另一个调用,如

bar.data(data).enter().append("rect")...

您可以先将高度(和/或宽度)设置为 0,然后调用 transition() 并将它们设置为实际值,从而使条形图“出现”。参见 this tutorial有关不同选择/连接的更多详细信息。

关于javascript - d3 可变长度过渡条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13306280/

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