Question

我有一个包含不同行的表。每一行都是不同的数据集。我有一个附加到行的单击事件，当您单击特定行时，它会提供额外的图表。

但这只是第一次有效。首次单击特定行后，数据显示在图表中，但如果单击另一行，则图表不会更改。

以下是我的一些代码：

    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");
          });

Answer 1

你只是在照顾所谓的输入选择;这意味着只有创建而不是更新或删除rects才会在您的代码中实现。

请参阅常规更新模式：General Update Pattern, 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。

点击事件D3.js仅适用于第一次

1 个答案: