Question

我想通过一个允许用户“缩放”到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);
});

我如何重新缩放积分位置？

Answer 1

更改xAxis后重新绘制图表将解决您的问题。

你也可以试试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));}); 
});

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

1 个答案: