Javascript 如何在d3中重新定位数据点？

我想通过一个允许用户“缩放”x轴的滑块来实现x轴“缩放”。重新缩放x轴是可行的，但我的数据点保持在同一位置，即它们不会重新缩放。如何同时缩放轴和数据点位置

“container”元素包含所有数据点。这就是我所说的要点：

xValue = function(d) {return d[2]};
xScale = d3.scale.linear().range([0, width]);
xMap = function(d) {return xScale(xValue(d))};
xAxis = d3.svg.axis().ticks(5).scale(xScale).orient("top");

container.selectAll(".dot")
      .data(datajson)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}); 

这是我的代码，通过滑块重新缩放x轴：

d3.select("#graphzoom").on("input", function() {
  curMin = getNewMinimum();
  curMax = getNewMaximum();
  xScale.domain([curMin,curMax]);
  container.selectAll("g.x.axis").call(xAxis);
});

---

如何重新缩放点位置？

在更改X轴时重新绘制图形将解决您的问题

您还可以尝试

transition（）

，以获得良好的效果

d3.select("#graphzoom").on("input", function() {
  curMin = getNewMinimum();
  curMax = getNewMaximum();
  xScale.domain([curMin,curMax]);
  container.selectAll("g.x.axis").call(xAxis);

  container.selectAll(".dot").remove();
  container.selectAll(".dot").
      .data(datajson)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}); 
});

---

您必须根据新的xAxis比例重新绘制点。