应用错误收集

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

时间：2017-10-15 13:13:03

标签： javascript d3.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图表绑定到这些元素，则不会出现这些错误。

1 个答案:

答案 0 :(得分：1)

问题的发生是因为图表DOM元素上的数据绑定。只需删除数据绑定并解决问题。

只需在迭代块上添加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>