D3 그룹 오버 플로우 오버 플로우 문제

이 문제의 정확한 원인을 정확히 알 수 없습니다. 차트에 대한 동적 범례를 만들고 "container div"의 정확한 가운데에 배치하고 싶습니다. 전체 범례가 작성된 후에 그룹을 div의 중심에 위치시키는 위치로 변환합니다.D3 그룹 오버 플로우 오버 플로우 문제

그러나 SVG가 300px에서 "잘린"것을 알 수 있습니다. 이 의미에서, 그것은 일종의 경계를 넘나들며 SVG 그래픽의 그 부분은 보이지 않습니다.

예제 코드는 여기 fiddle에 있습니다.

위의 링크에 작성된 코드의 혼란에 대해 미리 사과드립니다.

이것은 내가 svg를 번역하는 데 사용하는 것입니다.

d3.select(".avs-legend-group").attr("transform", "translate("+ xOffset + ",0)");

- 여기서 ".avs-legend-group"은 "g"그룹 요소를 보유하는 클래스입니다.

출처

2014-03-31 Serendipity

와 함께 자신이 확인할 수 있습니다 [이 파이어 폭스 browsershot] (http://browsershots.org/screenshots/9e92f997c91e00e6e2fd2a5e27cd1905)? [크롬]에서 나를 위해 일했다. (http://browsershots.org/screenshots/fd032191ea696a407117936f6093a07f) –

SVG의 너비가 명시 적으로 지정되지 않은 브라우저 문제 (Firefox) 인 것 같습니다. SVG 규격이 경우 일어나야 말하는

는

폭 = 최 SVG 요소 용 "< 길이 >"

상기 SVG 문서 조각의 고유 폭이다. 임베디드 'svg'요소의 경우 'svg'요소가있는 사각형 영역의 너비입니다.

음수 값은 오류입니다 (오류 처리 참조). 값 0은 요소 렌더링을 사용 불가능하게합니다.

속성을 지정하지 않으면 '100 %'값이 지정된 것과 같습니다.

아니요 : 예. 파이어 폭스에서이 문제가 해결 포함하는 SVG에 명시 적으로 100 %의 암시 적 값을 제공하는 경우

SVG 1.1 (Second Edition) – 16 August 2011 (강조 광산)

보인다.

var svg = d3.select("#" + uniqueIdentifier) 
    .append("svg") 
      .attr('width', '100%');

당신은 무엇에 같은 ammended JS Fiddle

출처

2014-03-31 08:33:28

나는 크롬을 한번도 들여다 보지 않았다. 내 잘못이야. SVG를 처음 사용하고 폭이 특정 부분을 읽지 않았습니다. 이것은 훌륭한 대답입니다. 사양에 대한 안내 주셔서 감사합니다! – Serendipity

D3 그룹 오버 플로우 오버 플로우 문제

답변

관련 문제