<g> 요소의 위치로 d3.event.Y를 얻는 방법

d3.js V4에서 d3.event.y는 SVG 요소에서 이벤트 y 위치를 제공하지만 이벤트의 위치가 필요합니다. G 요소. 예를 들어 마우스가 G 요소의 맨 위에 있으면 d3.event.y는 0이어야합니다. 그러나 마우스를 SVG 요소의 맨 위에두면 제로입니다. 내 시도는 다음과 같습니다. jsbin link - '물'선을 위아래로 드래그 해보세요. 물줄기는 마우스 끌기와 결코 일치하지 않습니다. 내 SVG는 페이지 너비에 따라 확장되므로 코드 값을 하드 코딩 할 수 없습니다.<g> 요소의 위치로 d3.event.Y를 얻는 방법

D3 V4 번호 : 그러면 사용자 공간의 형상의 Y 및 높이 특성을 얻기하고 getBBox 방법을 사용할 수

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

오프셋 계산한다

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

예 : 1, 2을

출처

2017-05-23 00:00:22 morganfree

나는 당신의 코드가 매우 intresting다는 것을 말해야한다. 당신은 변환하지 않았기 때문에

글쎄, 나는, 나는이 경우 d3.mouse (용기) 및 d3.event.y 사이에 차이가 없다고 생각, 당신은 d3.mouse(container)을 사용하는 것이 좋습니다 준비 g 요소가 있으므로 g 요소는 svg와 동일한 좌표계를 공유합니다.

난 d3.mouse (이) [1]과d3.event.y이 경우 동일한 값을 생성한다를 의미한다.

출처

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

알 겠어 : ** [이거 봐] (https://jsfiddle.net/Cheery/fo4z5s26/) * * – 1Cr18Ni9

<g> 요소의 위치로 d3.event.Y를 얻는 방법

답변

관련 문제