D3로 그린 SVG 원형 차트가 있고 원형 차트의 여러 조각 위에 마우스를 올려 놓을 때 나타나는 작은 HTML div가 있습니다.
http://jsfiddle.net/adamehirsch/bzSpW/
문제는 HTML 오버레이를 배치하는 데 있습니다. 현재는 전체 페이지를 기준으로 명시 적으로 배치해야합니다. 다음은 자바 스크립트의 145 번째 줄에 있습니다.
d3.select("#bracketsTip")
.style("left", "420px") // this is dumb
.style("top", "320px") // and unnecessary, I'm sure
.transition()
.duration(250)
.style("opacity", 1.0);
픽셀 오프셋을 직접 지정하지 않고도 HTML div가 원형 차트의 중앙에 표시되도록하는 방법을 찾고 있습니다. 제안?
바이올린에 jQuery가로드되어 있음을 알았습니다. 다음과 같이 할 수 있습니다.
var leftPos = width / 2 - $("#bracketsTip").width() / 2
, topPos = height / 2;
d3.select("#bracketsTip")
.style("left", leftPos + "px")
.style("top", topPos + "px")
.transition()
.duration(250)
.style("opacity", 1.0);
이제 원형 차트의 너비와 높이를 변경하면 오버레이가 중앙에 유지됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다