HTML本体に2つのsvgdivを追加しました
<div id="tag1"><svg></svg></div>
<div id="tag2"><svg></svg></div>
<body>
フォームを送信するたびに、以下のコードを呼び出してnvd3グラフを作成します。しかし、最初の呼び出しは機能するようですが、後続のフォーム送信呼び出しではグラフが変更されません（フォーム送信ごとにURLが異なるため、データが異なります。addGraph関数のdata引数が次のようになっていることを確認しました。ただし、addGraph関数へのデータが異なっていても、svgコンテンツは再入力されません。
newChart = d3.json(url, function(error, data) {
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.staggerLabels(true)
.tooltips(true)
.showValues(false)
.showXAxis(false)
.color(['#1f77b4'])
d3.select('#tag1 svg')
.datum(data['x])
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
nv.addGraph(function() {
var chart = nv.models.pieChart()
.showLabels(true);
d3.select("#tag2 svg")
.datum(data['y'])
.transition().duration(1200)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
コードは正常に機能するはずです。次のような操作を行って、実際に異なるデータを取得しているかどうかを確認します
d3.json(url, function(error, data) {
console.log(data);
}
フォームを送信するたびに、取得する内容が異なるかどうかを確認してください。
また、このコードをjsファイルからコピーしただけの場合は、最初のグラフの.datum（）に 'がないことに注意してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加