D3js用多轴线轴缩放图表

时间:2015-07-30 09:55:36

标签: d3.js

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

1 个答案:

答案 0 :(得分:0)

我发现了如何平移/缩放多线性轴而没有失真。

我在阅读这个问题的接受答案时想出来了: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/