x軸d3jsを更新しています
ルイス・メディーナ
ユーザーフィルターに応じて、D3js棒グラフのx軸を更新しようとしています（部分的に機能しています）。棒は実際には変化していますが、うまく機能していません。どこに問題があるのかよくわからないので、助けが必要です。
コードのこの部分では、棒グラフを更新しています
function update(selectedGroup) {
svg.selectAll("rect").remove()
var groups = d3.map(dataFilter, function(d){return(d.group)}).keys();
x.domain(groups);
var dataFilter = result.filter(function(d){return d.group==selectedGroup});
console.log(dataFilter);
var rectG=rectangulos(dataFilter)
}
完全な棒グラフ 
現在どのように機能していますか：
結果は次のようになります
アンドリューリード
この動作が見られるのは比較的簡単な理由があります。
When the domain of the scale x is all the groups x.bandwidth() is small. But when the domain of x is only one value, x.bandwidth() is large. In both cases, the first band starts in the same location.
Next we have a nested scale here xSubgroup - the range of this is equal to x.bandwidth(). When the domain of x changes, we need to update the range of xSubgroup. If we don't do this, the bars will still be very thin and start at the beginning of the axis (as the bars' bandwidth aren't changing even if the group's bandwidth does). You don't update the sub scale's range, but we need to do that:
x.domain(groups);
xSubgroup.range([0, x.bandwidth()])
With this we get the update we're looking for.
ただし、軸ラベルは変更されません。明示的に更新しない限り、スケールを更新しても軸は更新されません。メソッドチェーンを分割しg、軸を保持するための参照を保存します。
var xAxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
xAxis.selectAll("text")
...
これで軸を更新できます。テキストのスタイルも引き継いでいます。更新関数を使用して軸とデータのすべての入力/終了/更新を行うことでコードを簡略化できます-ここでは、初期設定と更新関数の両方が重複しているという点でいくつかの重複があります。
使用する軸を更新するには：
// Call the axis again to update
xAxis.call(d3.axisBottom(x))
xAxis.selectAll("text")
.style("text-anchor", "end")
.attr("font-size", "55px")
.attr("y", "-7")
.attr("x", "-7")
.attr("transform", "rotate(-90)");
私が正しく理解していれば、これは望ましい動作を与えます、更新されたplunkr
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
d3jsはX軸の目盛り位置を設定します
- 2
私のX軸は私が望むすべての目盛りをレンダリングしていません-D3JS
- 3
X軸とY軸がd3jsのエッジから切り取られています
- 4
D3js：X軸の目盛りを少し右に変換して、X軸の0から始まらないようにすることができませんか？
- 5
更新してD3JSに入力します
- 6
x軸とy軸を追加しようとしていますD3
- 7
d3jsでx軸に沿ってスクロール可能な軸/パンを作成する方法
- 8
d3jsでx軸に沿ってスクロール可能な軸/パンを作成する方法
- 9
d3jsは各軸の端に矢印を表示します
- 10
d3js nice（）が軸ドメインを切り上げていない
- 11
D3x軸データが重複しています
- 12
D3jsでズーム/パンを使用して複数のy軸を追加する
- 13
d3jsの動的yaxisと一緒にclipPathを更新します
- 14
d3jsで特定の投影法を使用した世界地図を探しています
- 15
d3.jsは、軸の更新に続いてネストされたデータサークル（enter.merge（））を更新しますか？
- 16
javascript d3jsフレームワークの遷移方法を理解しようとしていますか？
- 17
D3jsですでに作成されているノードを反復処理します
- 18
d3.jsを使用して、x軸をチャート上の座標（0,0）に移動します
- 19
d3.jsを使用して、x軸をチャート上の座標（0,0）に移動します
- 20
D3JS：x軸に5ティックしか設定できません
- 21
d3jsでタイムスケールのx軸の目盛りを指定するにはどうすればよいですか？
- 22
d3.jsはX軸とY軸の違いをどのように見分けますか？
- 23
D3jsの単一棒グラフはスライダーを介して更新をグラフ化します
- 24
D3JS：D3jsを使用して円内にSVGテキスト要素を作成するのに役立ちます
- 25
D3js折れ線グラフが値とx軸をレンダリングできないのはなぜですか？
- 26
d3.js軸から隆起したコーナーを削除して、フラット軸を作成します
- 27
d3.jsのマウス位置からX軸とY軸の値を取得します
- 28
d3.jsで棒グラフを更新しようとしています
- 29
D3JSは日付を複製します
コメントを追加