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

当你这样做时

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

翻译抱怨

Uncaught TypeError: Object  has no method 'attr'

因为attr方法适用于转场和选择。在使用之前，必须输入选择。将您的代码修改为以下内容，并使用foreignObject方法将文字附加到text。

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

更新了JS：http://jsfiddle.net/jaimem/xwZjN/46/

此外，您可能只想使用一个数据对象，而不是此

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元素的转换。

ForeignObject文本没有出现

1 个答案: