gpt4 book ai didi

javascript - 构建 billboard.js 图表的动态列表

转载 作者:行者123 更新时间:2023-11-29 23:33:32 24 4
gpt4 key购买 nike

我有一个 JSON 列表,其元素是一系列图表的属性。我想使用 D3 和 billboard.js 动态生成 HTML 列表 div元素,每个元素包含一个图表。设置显示在此 fiddle .当图表出现时,我收到许多 D3 错误,例如 Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)". billboard.js 图表有奇怪的 [object Object]出现在轴旁边的字符串。例如,如果我手动创建了名为 div 的错误,则不会出现这些错误。 HTML 中的元素,然后将 billboard.js 图表绑定(bind)到这些元素。

最佳答案

问题的发生是因为图表 DOM 元素上绑定(bind)了数据。只需删除数据绑定(bind)即可解决问题。

只需在迭代 block 上添加 d3.select(this).datum(null);。查看运行代码段的结果。

var cdata = [
{
title: "Chart1",
data: {
columns: [
["data1", 10, 20, 30],
["data2", 50, 20, 10]
]
}
},
{
title: "Chart2",
data: {
columns: [
["data1", 10, 20, 30],
["data2", 50, 20, 10]
]
}
}
];

d3.select("#container").selectAll("div")
.data(cdata)
.enter()
.append("div")
.style("width", 200)
.style("height", 200)
.each(function(d) {
// remove data set on DOM element
d3.select(this).datum(null);

bb.generate({
data: d.data,
title: { text: d.title },
bindto: this
});
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>

关于javascript - 构建 billboard.js 图表的动态列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46755408/

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