Как переставить datapoints в d3?

Question

Я хочу реализовать «зум» оси 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));}); 

А вот мой код, чтобы изменить масштаб оси х, выполняется через слайдер:

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