我要制作图表,那就是你不能拖出它的svg元素。我正在做这件事,就像这样jsfiddle
如你所见,你可以自由地缩放和拖动它。我想要的是这样的:如果你将它拖到右边,当y轴碰到左边的屏幕边缘时,它应该会停止,不能再拖到右边。
这也意味着,您不能在不放大的情况下拖动它,因为它已经填满了它的svg区域。
我想我必须以某种方式限制我的重绘方法。现在就是这样
function redraw() {
plotChart.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
};
例如,它可能必须检查图表的左边缘是否命中坐标,然后以某种方式停止将其进一步绘制。
发布于 2015-06-17 15:11:54
要知道缩放和平移时的轴点,您需要获取CTM,然后进行变换以获得真实的点。
//gets CTM on the first y line that is the group
var ctm = d3.select(".x").select(".tick")[0][0].getCTM();
//the first y line
var k = d3.select("svg")[0][0].createSVGPoint();
//current point without transform
k.x = d3.select(".x").select("line").attr("x2");
k.y = d3.select(".x").select("line").attr("y2")
j = k.matrixTransform(ctm)
//j is the real point of the line post transform.
//your code to zoom or pan depending on the value of j
https://stackoverflow.com/questions/30868798
复制相似问题