私は要素が一連のチャートのプロパティであるJSONリストを持っています。私はD3とbillboard.jsを使ってHTML div要素のリストを動的に生成したいと思います。各要素には1つのチャートが含まれています。このfiddleに設定が表示されます。グラフが表示されている間、私はError: <g> attribute transform: Trailing garbage, "translate(0,NaN)".のようなD3エラーが発生し、billboard.jsチャートには軸の隣に奇妙な[object Object]文字列が表示されます。これらのエラーは、たとえば、手動で名前がdivのHTMLに作成され、次に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