D3js Масштабирование диаграммы с полилинейной осью

Question

Я пытаюсь создать масштабируемую диаграмму с полилинейной осью x. Все работает как ожидалось, если у нет имеют полилинейную ось. Однако при использовании полилинейной оси панорамирование (и масштабирование) очень искажено. Если вы перетащите диаграмму в кастрюлю, вы увидите точки и искажения по оси x. В этом примере используется поведение D3js по умолчанию. Любые предложения по получению плавного панорамирования/масштабирования будут оценены.

Я использую преобразования для позиционирования элементов, потому что у меня возникли некоторые проблемы при указании значений cx и cy (особенно при добавлении новых данных на развернутую или увеличенную диаграмму).

Вот функция масштабирования:

var onZoom = function() { 
       if (d3.event.scale == 1) { //panning 

       } else { //zooming 
        // don't scale points and lines 
        graph.selectAll(".point") 
         .attr("r", 10/d3.event.scale) 
         .attr("stroke-width", 1/d3.event.scale); 
       } 

    graph.selectAll(".point") 
     .attr("transform", function (d) { return "translate(" + xMap(d) + "," + yMap(d) + ")scale(" +  d3.event.scale + ")"; }); 

    graph.select(".xAxis.axis").call(xAxis); 
    graph.select(".yAxis.axis").call(yAxis); 
}; 

Смотрите пример: https://jsfiddle.net/deanb/spjn8zL7/

Answer 1

Я узнал, как панорамирование/масштаб оси полилинейные без искажений.

Я понял это при чтении принятого ответа на этот вопрос: semantic zooming of force directed graph in d3. «Объект изменения размера d3 изменяет масштаб, изменяя свой домен. Аналогичным образом вы можете получить такой же эффект, изменив диапазон шкалы, поскольку важная часть изменяет отношения между доменом и диапазоном»..

поэтому я изменил поведение масштабирования, чтобы не обновлять й домен и я обновлю диапазон в поведении зума:

// update range in zoom event - leave the domain as is 
    x.range(d3.range(xTicks.length) 
     .map(function (d) { return (d * xRangeDelta) * d3.event.scale + d3.event.translate[0]; })) 

    graph.selectAll(".point") 
     .attr("transform", function (d) { return "translate(" + xMap(d) + "," + yMap(d) + ")scale(" + d3.event.scale + ")"; }); 

    graph.select(".xAxis.axis").call(xAxis); 
    graph.select(".yAxis.axis").call(yAxis); 

Вот обновленная скрипка: https://jsfiddle.net/deanb/hsfsx6b9/1/.