ajax 経由で要求されたフェッチされた JSON データをバインドする動的な棒グラフを作成しています。データは、メトリックとカテゴリの選択ドロップダウン メニューの値に従ってフィルター処理されます。これらの値はパラメーターとしてコントローラーに渡され、データベースに何を照会するかを決定するのに役立ちます。何らかの理由で、最初に送信された ajax リクエスト (および 1 番目のみ、2 番目ではなく 3 番目など) で、どの選択オプションが選択されていても、サーバーから返される「日付」値JSON データを含むグラフはグラフに表示されません。後続のすべての ajax リクエストでは、これらの日付値は期待どおりに表示されますが、最初のリクエストでは表示されません。
Chrome 開発者ツールで DOM 要素を見ると、この最初の ajax リクエストの後、「.labelContainer」g 要素は空です。これは、(少なくとも私にとっては) update または enter 選択が適切に機能しておらず、exit 選択のみがこの最初の要求で機能していることを意味します。入力する必要があるが、最初のリクエストでは表示されない「日付」値:
[{"date":"23","load_volume":40},{"date":"24","load_volume":10},{"date":"28","load_volume":432},{"date":"30","load_volume":20}]
さらに、次のように selectAll(.labelContainer .label) の代わりに selectAll("text.label") を実行すると、ラベル変数/関数に値を割り当てる ajax リクエストの成功関数で:
var label = svg.selectAll(".labelContainer .label").data(data, function(d) { return d.date; });
... 日付は他のすべてのリクエストでは表示されません (つまり、すべての奇数のリクエストでは表示されませんが、すべての偶数番号のリクエストでは表示されます)。
例：
デフォルトのグラフ (ページ読み込み時にレンダリング):
最初の ajax リクエスト (日付は表示されません):
2 番目の ajax リクエスト (日付が表示されます):
私がここに欠けているものはありますか？どんな助けでも大歓迎です。以下は、簡潔にするためにいくつかの部分を省略してチャートをグラフ化するコードです。「ラベル」モニカーは、Y 軸のテキスト要素に対応し ます: 完全なコードの要点は次のとおりです: https://gist.github.com/kwyoung11/b9f1fe72e19bc70526db
$(document).ready(function () {
//*** Initial data request and graph configuration omitted for brevity, except for Y axis label configuration below, which is relevant ***//
// Place Y axis labels in g element for easy maneuvering
var label_group = svg.append("g").attr("class", "labelContainer").attr("transform", "translate(0,15)");
// Draw the Y axis labels.
label_group.selectAll("text").data(data).enter().append("text")
.attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
.attr("y", graphHeight)
.attr("class", "label")
.text(function(d) { return d.date; });
// Ajax request for updating the graph when user clicks option in select menu
$("#metric_select, #category_select").on('change', function () {
$.ajax({
//*** Ajax settings ommitted **** //
success: function(data) {
// Set the new Y scale.
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.load_volume; })])
.range([0, graphHeight]);
// Re-select chart elements and bind them to new data
//*** rect(bar/column) and text element re-selection omitted for brevity ***//
var label = svg.selectAll(".labelContainer .label").data(data, function(d) { return d.date; });
var delay = function(d, i) { return i * 50; };
// Updating rects and text.
// *** Omitted for brevity ***//
// Update the Y axis labels.
label.transition().duration(750)
.delay(delay)
.attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
.attr("y", graphHeight)
.attr("transform", "translate(0,15)")
.attr("class", "label")
.text(function(d) { return d.date; });
// Draw new rects and texts
// *** Omitted for brevity **//
// Draw new labels.
label.enter().append("text")
.attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
.attr("y", graphHeight)
.attr("transform", "translate(0,15)")
.attr("class", "label")
.text(function(d) { return d.date; });
// Exit selections
rect.exit().remove();
text.exit().remove();
label.exit().remove();
//*** closing brackets omitted for brevity ***//
編集
初期グラフの DOM の外観(.labelContainer g に日付ラベルのテキスト要素が入ります):
最初の ajax リクエストで DOM がどのように見えるか(.labelContainer g 空でテキスト要素なし):
そして 2 番目のリクエスト(.labelContainer g は空ですが、ラベル テキスト要素はその後に表示されます):
最初のグラフでは、ラベルの選択によって .labelContainer g 要素内の要素が返されているようです。更新時に、最初の ajax リクエストは何も返さず、2 番目のリクエストはラベル テキスト要素を返しますが、.labelContainer g 要素内では返しません。