如何获得d3.event.Y作为<g>元素中的位置

在d3.js V4中，d3.event.y给出了事件在SVG元素中的位置，但我需要事件的位置，因为它在G元素。例如，如果鼠标位于G元素的顶部而不是d3.event.y应该为零。但在我的尝试中，只有当鼠标位于SVG元素的顶部时，它才为零。这是我的尝试：jsbin link - 尝试上下拖动“水”线。水线从不匹配鼠标拖动。我的SVG将按照页面的宽度进行缩放，因此我无法对代码值进行硬编码。如何获得d3.event.Y作为<g>元素中的位置

D3 V4代码：

var high = null; 
d3.select('#bfG').call(
    d3.drag().on('start', function() { 
    //get the real height of the <g> element 
    high = this.getBoundingClientRect().height; 
    }).on('drag', function() { 
    // % of the location relative to the <g> height 
    var p = (d3.event.y/high) * 100; 
    var q = Math.max(0, Math.min(100, p)); 
    d3.select('#stop1').attr('offset', q + '%'); 
    d3.select('#stop2').attr('offset', q + '%'); 
    }) 
);

来源

2017-05-22 getsetbro

在所有的比例级别上，这个工作正常[var p = d3.event.y - 25;'http://jsbin.com/yodagoxemo/1/edit?html,js,output – Cyril

不是当我的形状高度发生变化时：http://jsbin.com/yecazad/1/edit?js,output – getsetbro

可以使用getBBox方法来获得在用户空间中的形状的y和height属性，然后计算偏移：

var bbox = this.getBBox() 
var p = (d3.event.y - bbox.y)/bbox.height * 100

例子：1，2

来源

2017-05-23 00:00:22 morganfree

我必须说你的代码非常有趣。

好了，我准备建议你使用d3.mouse(container)的话，我认为在这种情况下d3.mouse（容器）和d3.event.y没有什么区别，因为你没有改造g元素，因此g元素与svg共享相同的坐标系。

我的意思是d3.mouse（本）[1]和d3.event.y将在这种情况下，产生相同的值。

来源

2017-05-23 00:50:37 1Cr18Ni9

我明白了：** [看这个]（https://jsfiddle.net/Cheery/fo4z5s26/）* * – 1Cr18Ni9

如何获得d3.event.Y作为<g>元素中的位置

回答

相关问题