[javascript] D3.js : 임의의 요소에 대해 계산 된 너비와 높이를 얻는 방법은 무엇입니까?

Program / 글쓴이

사용자가 클릭하면 그 주위에 선택 마커를 그려야하기 때문에 g내 임의의 요소 의 너비와 높이를 정확히 알아야 SVG합니다.

내가 인터넷에서 본 것은 다음과 같습니다 d3.select("myG").style("width"). 문제는 요소가 항상 명시적인 너비 속성 집합을 가지지 않는다는 것입니다. 예를 들어 내부에 원을 만들면 너비 대신 g반경 ( r)이 설정됩니다. 에 window.getComputedStyle메서드를 사용하더라도 circle“auto”를 반환합니다.

에서 임의의 svg요소 의 너비를 계산하는 방법이 D3있습니까?

감사합니다.

답변

SVG 요소의 경우

같은 것을 사용하면 다음과 같은 selection.node().getBBox()값을 얻을 수 있습니다.

{
    height: 5,
    width: 5,
    y: 50,
    x: 20
}

HTML 요소의 경우

사용하다 selection.node().getBoundingClientRect()

답변

.getBoundingClientRect () 는 요소의 크기와 뷰포트에 대한 상대적 위치를 반환합니다.

  • 왼쪽 오른쪽
  • 상단, 하단
  • 높이 너비

예 :

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;

답변

한 번 내 변수 (svg 또는 html)에 현재 저장된 요소를 알지 못했지만 너비와 높이를 가져와야 할 때 문제에 직면했습니다. 이 기능을 만들고 공유하고 싶습니다.

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

아래 숨겨진 스 니펫의 작은 데모. 파란색 div와 빨간색 svg 원에 대한 클릭을 동일한 기능으로 처리합니다.

코드 스 니펫 표시

답변