構建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圖表的動態列表