d3でデータポイントを再配置する方法は？

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