1

我使用 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/

4

1 回答 1

1

当你这样做时

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

口译员抱怨

Uncaught TypeError: Object  has no method 'attr'

因为该attr方法对转换和选择进行操作。在使用它之前，有必要输入一个选择。将您的代码修改为以下内容并将文本附加到foreignObjectusingtext方法。

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编程方式计算元素的转换。

于 2012-11-17T07:08:22.660 回答