构建billboard.js图表的动态列表
问题描述:
我有一个JSON列表,其元素是一系列图表的属性。我想使用D3和billboard.js动态生成HTML div
元素的列表,其中每个元素都包含一个图表。该设置显示在此fiddle。在出现图表时,我收到了一些D3错误,如Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)".
,billboard.js图表出现奇怪的[object Object]
字符串,出现在轴旁边。如果例如我手动在HTML中创建了名为div
的元素,然后将billboard.js图表绑定到这些元素,则不会出现这些错误。构建billboard.js图表的动态列表
答
由于数据绑定在图表DOM元素上,因此发生问题。 只需删除数据绑定并将解决问题。
只需在迭代块中添加d3.select(this).datum(null);
即可。 查看运行代码段的结果。
var cdata = [
\t {
\t \t title: "Chart1",
\t \t data: {
\t \t \t columns: [
\t \t \t \t ["data1", 10, 20, 30],
\t \t \t \t ["data2", 50, 20, 10]
\t \t \t ]
\t \t }
\t },
\t {
\t \t title: "Chart2",
\t \t data: {
\t \t \t columns: [
\t \t \t \t ["data1", 10, 20, 30],
\t \t \t \t ["data2", 50, 20, 10]
\t \t \t ]
\t \t }
\t }
];
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
\t d3.select(this).datum(null);
bb.generate({
\t data: d.data,
\t title: { text: d.title },
\t 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>
的'[对象的对象]'通常意味着你要打印出整个对象,而不是对象的属性或功能。你有一些代码示例吗? – dyatesupnorth
请参阅代码示例的原始发布中提到的[fiddle](https://jsfiddle.net/abielr/np70vdj3/)。 – Abiel