foreignObjects를 사용하여 D3 트리의 노드 텍스트 감싸기

Question

문제점 : D3 트리의 노드와 관련된 텍스트를 줄 바꿈하려고하지만 텍스트를 HTML 링크에 올바르게 할당 할 수 없습니다.

너비를 제어하기 위해 "div"요소를 추가 할 수있는 "foreignObject"요소를 추가하는 방식을 사용하려고합니다. "div"가 있으면 HTML 링크와 관련 텍스트가있는 HTML "a"요소를 추가하려고합니다.

HTML DOM 개체는 "a"요소가 올바르게 구성되었지만 브라우저에서 렌더링하지 않는다는 것을 보여줍니다. "body"요소로 감싸거나 감싸지 않는 것처럼 작동하지 않는 것 같습니다.

코드 :

 nodeEnter.append("svg:foreignObject") 
      .attr("width", "50") 
      //.append("xhtml:body") 
      //.attr("xmlns", "http://www.w3.org/1999/xhtml") 
     .append("svg:div").attr("class", "NODE_LABEL_DIV") 
     .append("svg:a") 
      .attr("xlink:href", function(d) { return d.hlink; }) 
      .text(function(d) { return d.name; }) 
      .attr("x", function(d) { return d.children || d._children ? horizontalNodeOffset : horizontalNodeOffsetLeaf; }) 
      .attr("dy", "-10") 
      .attr("fill", "Blue") 
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
      .style("fill-opacity", 1e-6); 

내 질문 : HTML foreignObject 내에서 "DIV"을 "은"요소를 추가 할 수있는 권리 방법은, 그래서 제대로 렌더링 그래서 나는를 사용하여 텍스트를 포장 할 수있는 작업 "div"요소?

Answer 1

div 및 a 요소에 대해 잘못된 네임 스페이스를 사용하고 있습니다. 접두어로 svg:을 붙이면 브라우저에서 SVG 요소로 해석하도록 요청할 것입니다. foreignObject을 사용할 때의 요점은 비 SVG 요소를 사용할 수 있다는 것입니다.이 요소는 HTML 요소이므로이를 선언해야합니다 (네임 스페이스를 생략해도됩니다).

여기 을 D3에 사용하는 complete example입니다. 인수에있는 모든 마크 업을 .html()으로 지정하거나 별도의 요소를 추가 할 수 있습니다. 중요한 것은 네임 스페이스를 올바르게 가져 오는 것입니다.