D3의 텍스트 래핑

저는 텍스트 랩핑에 대해 잠시 동안 연구 해왔지만, 많은 사람들이 CSS를 텍스트 랩으로 사용하고 있습니까?D3의 텍스트 래핑

이 같은 랩 뭔가를 텍스트 D3를 사용할 수있는 방법이 있습니까 :

p.append("text") 
    .attr("transform", "translate(-20, -30)") 
    .text("Relevance") 
    .style("font", "bold 12px Arial");

출처

2012-11-16 Jose

당신은 HTML div 또는이 작업을 유사과 svg:foreignObject를 사용해야합니다. SVG 자체가 텍스트를 래핑하지 않습니다.

출처

2012-11-16 21:34:17

'svg : foreignObject'는 어떤 버전의 IE에서도 지원하지 않습니다. Chrome은 'foreignObject'에 대한 변환도 지원하지 않습니다. –

p은 아직 xhtml 요소가 아닙니다. g과 같은 일부 svg 요소 인 경우 foreignObject을 추가 한 다음 나중에 다음 코드와 같이 div와 같은 xhtml 요소를 추가 할 수 있습니다.

p = svg.append('g'); 
p.append("foreignObject") 
.attr("x", 5) 
.attr("y", 5) 
.attr("width", 100) // replace with width you want 
.attr("height", 100)// replace with height you want 
.append("xhtml:div")// replace with html element you want 
.append("p") 
.text("Relevance");

출처

2013-05-16 07:17:07

기타 답변은 svg:foreignObject을 사용하는 것이 좋습니다. 슬프게도 IE의 어떤 버전도 foreignObject을 지원하지 않습니다. 최신 버전도 없습니다 (작성 당시 11). 다른 브라우저에서의 지원은 일부 지원되지 않는 전환과 일치하지 않습니다. 따라서 변환을 필요로하지 않고 IE를 지원할 필요가없는 경우 foreignObject을 사용할 수 있습니다. HTML + CSS를 지원하기 때문에 가장 쉬운 방법입니다. 당신이 IE의 지원 또는 전환 ...

필요한 경우

그렇지 않으면, Mbostock는 Wrapping Long Labels에 대한 예제가 있습니다. 그것은 사소한 것이 아니지만 다른 상황에서 텍스트를 감싸는 데 적용 할 수 있습니다.

D3plus

은과 같이 text wrapping을 지원

d3plus.textwrap() 
    .container(d3.select("#rectWrap")) 
    .draw();

내가 D3plus 사용했습니다. 사용하기가 매우 쉽습니다. 그러나 D3plus에는 원하지 않는 다른 기능이 있으므로 d3textwrap, 텍스트 배치 만 추가하는 플러그인을 고려할 수 있습니다.

출처

2015-06-04 16:00:38

D3의 텍스트 래핑

답변

관련 문제