D3js 多线性轴缩放图表答案

【问题标题】：D3js Zooming chart with polylinear axisD3js 多线性轴缩放图表
【发布时间】：2015-10-21 14:56:26
【问题描述】：

我正在尝试创建一个具有多线性 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/

【问题讨论】：

标签： d3.js

【解决方案1】：

我发现了如何在不变形的情况下平移/缩放多线性轴。

我在阅读该问题的公认答案时发现了这一点：semantic zooming of force directed graph in d3。 “d3缩放行为对象通过改变其域来修改比例。你可以通过改变比例范围来获得类似的效果，因为重要的部分是改变域和范围之间的关系。”。

因此我修改了缩放行为以不更新 x 域并更新缩放行为中的范围：

  // 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/。

【讨论】：