如何獲得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>元素中的位置

回答

相關問題