Question

使用D3 ver 3.5.5。我使用示例（https://gist.github.com/stepheneb/1182434）作为模板：绘制数据的示例代码如下所示：

  var circle = this.vis.select("svg").selectAll("circle")
      .data(this.points, function(d) { return d; });

  circle.enter().append("circle")
      .attr("class", function(d) { return d === self.selected ? "selected" : null; })
      .attr("cx",    function(d) { return self.x(d.x); })
      .attr("cy",    function(d) { return self.y(d.y); })
      .attr("r", 10.0)
      .style("cursor", "ns-resize")
      .on("mousedown.drag",  self.datapoint_drag())
      .on("touchstart.drag", self.datapoint_drag());

  circle
      .attr("class", function(d) { return d === self.selected ? "selected" : null; })
      .attr("cx",    function(d) { 
        return self.x(d.x); })
      .attr("cy",    function(d) { return self.y(d.y); });

  circle.exit().remove();

我认为这有四个部分：第一部分是selectAll（“圆圈”）并添加数据。第二个告诉数据点在哪里（“cx”，“cy”）和其他attr（），第三个对我来说有点神秘，因为它似乎也设置了“cx”和“cy”，但没有其他属性。最后，我们执行exit（）。remove（），文档说明删除了与数据数组无关的任何数据元素。我不明白这个例子中是怎么发生的。当我在代码中设置断点时，会为this.points数组中的每个数据点调用“cx”步骤。

在我的代码中，我尝试执行相同的步骤：

hr_circles = self.graph_gps.svg.selectAll("hr_circles")
        .data(self.graph_gps.datay1); // , function(d){return d;}

hr_circles.enter().append("circle")
        .style("z-index", 3)
        .attr("class", "y1")
        .attr("r", 1)
        .attr("cx", function (d, i) {
          return xScale(d.time)
        })
        .attr("cy", function (d, i) {
          return yScale(d.vy)
        })
        .on("mouseover",
                function (d) {...displays a tooltip...})
        .on("mouseout", function (d) {
        });

  hr_circles.attr("class", "y1")
          .attr("cx", function (d, i) {
            return xScale(d.time)
          })
          .attr("cy", function (d, i) {
            return yScale(d.vy)
          })

  hr_circles.exit().remove();

当我的图表最初显示时，数据显示正常，正确缩放等。当我尝试通过拖动x轴（如示例中）重新缩放时，轴重新调整自身就好了，然后重新调整缩放的数据显示在图表上，但原始数据仍然存在（不再正确缩放），造成大混乱！如何擦除或使原始缩放的数据消失？试图发布图片，但我想我的声誉太低了。将发送给任何感兴趣的人。

轴重新缩放后，旧的缩放数据无法消失

0 个答案: