gpt4 book ai didi

javascript - D3 转换在 "background-color"上工作但不在 "width"上工作

转载 作者:太空宇宙 更新时间:2023-11-04 07:28:51 25 4
gpt4 key购买 nike

简单问题:我正在尝试在 <div id="chart"></div 中编写动画条形图使用以下 d3.js 代码:

data=[100,200,400,350];
d3.select("#chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("height",30)
.style("width",function(d){return d/2})
.style("background-color","grey")
.transition()
.style("width",function(d){return d})
.style("background-color","blue");

结果很奇怪:条形颜色来自 greyred正如预期的那样,但它们的宽度保持在 d/2 .

知道为什么吗?

最佳答案

您正在使用 CSS 样式设置宽度。这需要 units (px、em 或 %)。

更新代码:

<!DOCTYPE html>
<html>

<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<div id="chart"></div>
<script>
data = [100, 200, 400, 350];
d3.select("#chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("height", "30px")
.style("width", function(d) {
return d / 2 + "px"
})
.style("background-color", "grey")
.transition()
.duration(2000)
.style("width", function(d) {
return d + "px";
})
.style("background-color", "blue");
</script>
</body>

</html>

关于javascript - D3 转换在 "background-color"上工作但不在 "width"上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49635358/

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