모든 내용을 표시하기 위해 d3/dagre-d3 svg 크기 조정

StackOverflow https://stackoverflow.com//questions/20029673

문제

다음을 사용하여 DAG를 만들려고 합니다. dagre-d3.이러한 DAG에 대한 데이터는 데이터베이스에서 제공되며 각 DAG마다 다르기 때문에 모든 노드와 가장자리를 그래프에 추가하기 전에 포함 svg를 제공할 너비/높이를 모릅니다.

그래서 이상적으로는 다음과 같이 부르겠습니다. d3.select("#svg1").resize_to_match_contents() 모든 노드와 가장자리를 추가한 후 모든 노드가 표시되고 svg가 너무 크지 않은지 확인하세요.물론 그런 기능은 없고, 어떻게 구현해야 할지 모르겠습니다.전화할 수 있다는 걸 알아요 d3.select("#svg1").attr("height", "10") 높이를 설정하고 싶지만 높이가 무엇인지 검색/계산하는 방법을 모릅니다. <g> SVG 내부의 요소는 다음과 같습니다.

도움이 되었습니까?

해결책

SVG의 내부 및 외부 크기는 다음을 사용하여 독립적으로 제어할 수 있습니다. 뷰박스 기인하다.찾는 것에 대해 이야기할 때 크기 g 요소가 없는 경우에만 의미가 있습니다. viewBox 정의되어 있고 다른 것은 없습니다 규모 어디서나 변신.

svg width height and viewBox

제가 제안하는 방법은 다음과 같습니다.

  1. 설정 width/height ~의 svg 요소에 window.innerWidth 그리고 window.innerHeight, 또는 원하는 최대 크기로 확장할 수 있습니다.
  2. 설정 viewBox 다음과 같은 속성을 부여합니다. "0 0 100 100" 그런 다음 코드의 모든 스케일을 정의하여 도메인을 갖습니다. [0, 100].이렇게 하면 그래프가 수축하다 지정된 영역에 맞게.

또한 방법을 살펴보세요. nvd3 창 크기 조정을 처리합니다., 및 다음을 사용하여 크기 조정 시 SVG 요소 내부의 좌표계를 유지하는 방법 종횡비 보존.

웹페이지에서 수집한 내용에 따르면 darge-d3는 렌더링 크기를 명시적으로 제한하기 위한 레이아웃 옵션 설정을 허용하지 않으며 사용된 최대 크기를 반환하지 않습니다.그러나 다음을 사용할 수 있습니다. getBBox() 의 크기를 얻으려면 g 렌더링된 상자에서 viewBox 그렇게 단지 SVG에 맞거나 height, width SVG에서 g 1:1이지만 레이아웃이 깨질 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top