Question

我必须做一个d3图表来显示一些随时间变化的值。我有15层数值。

在这种情况下，我将2011年11月作为我的第一个月（firstMonth = data [0];）和2013年12月作为我的上个月（lastMonth = data [data.length-1];）。

我想在图表上放置缩放以更好地查看信息。

我的问题是：当我拖动它时，我必须做什么才能使图形的值保持在firstMonth和lastMonth之间（因为我不希望图形显示没有值的轴的其余部分）？

我放大了：

var zoom = d3.behavior.zoom().scaleExtent([1, 3]).x(x).on("zoom", function(){               
    d3.selectAll(".layer").remove();
    setLayers();
    focus.select(".x.axis").call(xAxis);
});

最后我通过

来调用它

svg.call(zoom);

我知道点击并拖动图表时的监听器是“mousedown.zoom”。所以我想在缩放后点击图表时计算最小值和最大值，因为x域不同。所以如果min> firstMonth.date＆amp;＆amp;最大＆lt; lastMonth.date我可以把它拖走。

svg.call(zoom).on("mousedown.zoom",function(){

    min = x.domain()[0];
    max = x.domain()[1];

    if(min > firstMonth.date && max < lastMonth.date){
        //drag the graph
    }
});

但是现在，我不知道该怎么办，因为我觉得没有超级（比如Java）来调用这个事件。

http://codepen.io/anon/pen/LEVooK

谢谢！：）

d3.js：缩放监听器 - mousedown.zoom - 当我拖动图形时

0 个答案: