ForeignObject文本不出現

我已經使用ForeignObject命令來包裝一些文本。出於某種顯而易見的原因，它並沒有出現在畫布上。我可能錯過了一些東西，但我看不到它是什麼。任何幫助將不勝感激:)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/

來源

2012-11-17 Jose

由於這似乎是一個「視覺」問題，請爲我們創建一個http://jsfiddle.net/演示。這使我們能夠更快地幫助您，並可能創建更準確/有用的答案。 –

@FelixKling謝謝，我編輯了原始問題。我希望這有助於！ – Jose

當你做到這一點

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

的解釋抱怨

Uncaught TypeError: Object has no method 'attr'

因爲attr方法上的轉變工作和選擇tions。在使用之前，有必要輸入一個選項。將您的代碼修改爲以下內容，並使用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 blah = { "Network": "translate(-150,20)"}; 
var dah = [ {t:"Network"}];

做這樣的事情

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

並經營對這樣的數據

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

當然，您也可能想要以編程方式計算foreignObject元素的轉換。

來源

2012-11-17 07:08:22 jaime

ForeignObject文本不出現

回答

相關問題