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 回答