1

異なる行を持つテーブルがあります。すべての行は異なるデータ セットです。特定の行をクリックすると、追加のグラフが表示される行にオン クリック イベントが関連付けられています。

しかし、それは最初だけしか機能しません。特定の行を最初にクリックすると、そのデータがグラフに表示されますが、別の行をクリックしてもグラフは変わりません。

これが私のコードの一部です：

    var chart = d3.select("body").append("svg")
          .attr("class", "chart")
          .attr("width", w * 24)
          .attr("height", h);

//saturday
var saturday = d3.select(".saturday")
        .selectAll("td")
        .data(d3.values(twitterDays[5][5]))
          .enter()
          .append("td")
          .attr("class", function(d) { return "hour h" + color(d); });

d3.select(".saturday").on("click", function() {
              chart.selectAll("rect")
                   .data(d3.values(twitterDays[5][5]))
                 .enter().append("rect")
                   .attr("x", function(d, i) { return x(i) - .5; })
                   .attr("y", function(d) { return h - y(d) - .5; })
                   .attr("width", w)
                   .attr("height", function(d) { return y(d); })

              chart.append("line")
                   .attr("x1", 0)
                   .attr("x2", w * d3.values(twitterDays[5][5]).length)
                   .attr("y1", h - .5)
                   .attr("y2", h - .5)
                   .style("stroke", "#000");
            });

//sunday
var sunday = d3.select(".sunday")
        .selectAll("td")
        .data(d3.values(twitterDays[6][6]))
          .enter()
          .append("td")
          .attr("class", function(d) { return "hour h" + color(d); });         

d3.select(".sunday").on("click", function() {
            chart.selectAll("rect")
                 .data(d3.values(twitterDays[6][6]))
               .enter().append("rect")
                 .attr("x", function(d, i) { return x(i) - .5; })
                 .attr("y", function(d) { return h - y(d) - .5; })
                 .attr("width", w)
                 .attr("height", function(d) { return y(d); })

            chart.append("line")
                 .attr("x1", 0)
                 .attr("x2", w * d3.values(twitterDays[6][6]).length)
                 .attr("y1", h - .5)
                 .attr("y2", h - .5)
                 .style("stroke", "#000");
          });
4

1 に答える 1

3

あなたは、いわゆるエンターセレクションだけを処理しています。つまり、四角形の作成のみがコードに実装され、更新または削除は実装されません。

一般的な更新パターンを参照してください:一般的な更新パターン、I

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = svg.selectAll("text")
      .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em");

  // ENTER + UPDATE
  // Appending to the enter selection expands the update selection to include
  // entering elements; so, operations on the update selection after appending to
  // the enter selection will apply to both entering and updating nodes.
  text.text(function(d) { return d; });

  // EXIT
  // Remove old elements as needed.
  text.exit().remove();
}

Mike のThinking with Joinsを必ずご覧ください。

于 2013-01-29T01:56:20.507 に答える