Javascript D3.js将图表拖出其svg元素
Javascript D3.js将图表拖出其svg元素
提问于 2015-06-16 21:21:18
我要制作图表，那就是你不能拖出它的svg元素。我正在做这件事，就像这样jsfiddle
如你所见，你可以自由地缩放和拖动它。我想要的是这样的:如果你将它拖到右边，当y轴碰到左边的屏幕边缘时，它应该会停止，不能再拖到右边。
这也意味着，您不能在不放大的情况下拖动它，因为它已经填满了它的svg区域。
我想我必须以某种方式限制我的重绘方法。现在就是这样
function redraw() {
plotChart.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
};例如，它可能必须检查图表的左边缘是否命中坐标，然后以某种方式停止将其进一步绘制。
回答 1
Stack Overflow用户
回答已采纳
发布于 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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30868798
复制相关文章
相似问题