ForeignObject 텍스트가 나타나지 않습니다.

Question

일부 텍스트를 감쌀 때 ForeignObject 주문을 사용했습니다. 어떤 명백한 이유 때문에 그것은 캔버스에 전혀 나타나지 않습니다. 나는 아마 뭔가를 놓쳤을 것이다. 그러나 나는 그것이 무엇인지 알 수 없다. 어떤 도움을 주시면 감사하겠습니다 :)

var blah = { "Lets see how long this goes on for!!!": "translate(-150,20)" 

     }; 

var dah = [ {name:"Lets see how long this goes on for!!!"} ]; 


var fo = svg.append("svg:foreignObject") 
     .data(dah) 
     .enter() 
     .attr("width", 80) 
     .attr("height", 200) 
     .attr("transform", function(d,i) {return blah[d.name];}) 

fo.append("xhtml:chart") 
    .html(function(d) {d.name;}) 
    .style("font", "bold 12px Arial") 

; 

편집 : http://jsfiddle.net/xwZjN/44/

Answer 1

당신은 attr 방법은 전환에 작동하기 때문에이

var fo = svg.append("svg:foreignObject") 
      .data(dah) 
      .enter() 
      .attr("width", 80) 

은 인터프리터가

Uncaught TypeError: Object has no method 'attr' 

을 불평 할 때 및 selec. 그것을 사용하기 전에 선택을 입력해야합니다. 코드를 다음으로 수정하고 text 메서드를 사용하여 foreignObject에 텍스트를 추가하십시오.

var fo = svg.selectAll("foreignObject") 
      .data(dah) 
      .enter() 
      .append("svg:foreignObject") 
      .attr("width", 80) 
      .attr("height", 200) 
      .text(function(d) { return d.t; }); 

업데이트 JS : 또한

, 당신은이

var someData = [ 
    { text:"Network", translate:"translate(-150,20)"}, 
    { text:"Test", translate:"translate(-115,-75)"} 
]; 

처럼 뭔가를 대신

var blah = { "Network": "translate(-150,20)"}; 
var dah = [ {t:"Network"}]; 

의, 하나 개의 데이터 객체를 사용하려는 작동 할 수도 있습니다 이와 같은 데이터에

.attr("transform", function(d,i) {return d.translate; }) 
.text(function(d) { return d.text; }); 

물론 프로그래밍 방식으로 foreignObject 요소의 변환을 계산할 수도 있습니다.