D3 v4 更新棒グラフが最後の棒をプロットしない
ジェームズ・ホランド
私は D3 に慣れておらず、javascript は私の母国語ではないので、js のベスト プラクティスを使用していない可能性があることを事前にお詫びします。
データセットを循環するこの棒グラフを再作成して、毎回棒を追加しようとしています。しかし、D3 v4 になるように変更しようとしています。
https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01
最後の棒グラフをプロットする以外は、ほとんど機能しています。x 軸にスポットを配置します。ただし、棒グラフは表示されません。
https://jsfiddle.net/jimdholland/07p8z8pb/35/
私が見る限り、反復関数は最後の要素とデータ値を取得しています。
function cycler(data) {
var slices = [];
for (var i = 0; i < data.length; i++) {
slices.push(data.slice(0, i+1));
} //End for loop
slices.forEach(function(slice, index){
setTimeout(function(){
drawChart(slice);
console.log(slice);
}, index * 300);
}); //End for Each
}; // End cycler function
グラフを描画する関数を作成しましたが、古いデータを適切に消去していない可能性があります。
function drawChart(data) {
x.domain(data.map(function(d) { return d.Word; }));
y.domain([0, d3.max(data, function(d) { return d.Positive; })]);
svg.select(".xAxis").transition().duration(300).call(d3.axisBottom(x));
svg.select(".yAxis").transition().duration(300).call(d3.axisLeft(y));
//svg.select('.xaxis').transition().duration(300).call(xAxis);
var bar = svg.selectAll("rect").data(data);
bar.exit()
.transition()
.duration(300)
.attr("y", innerHeight)
.attr("height", 0)
.style('fill-opacity', 1e-6)
.remove();
bar.enter().append("rect")
.attr("class", "bar")
.merge(bar)
.attr("y", innerHeight)
.attr("height", 0);
bar.transition().duration(300)
.attr("x", function(d) {return x(d.Word); })
.attr("width", x.bandwidth())
.attr("y", function(d) {return y(d.Positive); })
.attr("height", function(d) {return height - y(d.Positive); });
};
助けてくれてありがとう、そして私は D3 コードを書くためのより良い実践にも心を開いています。
シロフド
cycler()関数内でfor ループ<を次のように変更するだけです。<=
for (var i = 0; i <= data.length; i++) {
slices.push(data.slice(0, i+1));
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
D3 v4 棒グラフでラベルが表示されない
- 2
D3 v4のtree.links（）
- 3
d3 v4 の tree.nodeSize
- 4
d3 v4でクリック可能な遷移棒グラフを作成するには?
- 5
D3 v4のスケールパディング
- 6
v4でのd3ズーム機能の問題
- 7
d3 v4でCSVを読み取る方法は？
- 8
d3をv4に更新した後のノード位置の問題
- 9
D3をv4からv6にアップグレードした後、軸がグラフの中心に移動します
- 10
D3 v4でのd3.transformの置き換え
- 11
v3からv4への移行-ツールチップがd3に表示されない
- 12
d3 v4で3つのグラフを表示するクリック可能な遷移棒グラフを作成するにはどうすればよいですか?
- 13
d3 v4でフォースチャートを描く方法は？
- 14
d3 (v4): 要素に勢いのある外観を与えますか?
- 15
D3 V4でズーム速度を制御する方法は？
- 16
d3 v4: ヒストグラム データでスタックを使用しますか?
- 17
Angular-4 d3 v4問題：プロパティ「x」がタイプ「HierarchyNode」に存在しません
- 18
d3 js v4棒グラフを下（x軸）から上にアニメーション化する方法は？
- 19
D3 v4 .rangeBand（）と同等
- 20
d3 v4 line chart transition not working
- 21
d3 v4に移行すると、ドラッグ時に重複が発生します
- 22
D3 v4グラフはバーを更新しませんが、新しい軸データを追加します
- 23
d3.js（v3）enter（）が棒グラフの更新で機能しない
- 24
d3インタラクティブ行列散布図をv4に更新する際の問題
- 25
d3（v4）折れ線グラフで線を動的に追加/削除する
- 26
トグル関数をd3ツリーチャートv4に追加します
- 27
d3 v4 / v5モジュールをNodeプロジェクトにインポートし、D3 v3名前空間スタイル（d3。）を維持するにはどうすればよいですか？
- 28
d3 v4 x軸とバーを揃えられないのはなぜですか？
- 29
d3 js v4 +スケール制限でズームとパンをマップします
コメントを追加