构建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图表的动态列表

来源

2017-10-15 Abiel

的'[对象的对象]'通常意味着你要打印出整个对象，而不是对象的属性或功能。你有一些代码示例吗？ – dyatesupnorth

请参阅代码示例的原始发布中提到的[fiddle]（https://jsfiddle.net/abielr/np70vdj3/）。 – Abiel

由于数据绑定在图表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>

来源

2017-10-31 09:38:13

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

回答

相关问题

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