我和foreignObjectSVG 一起讨厌.我想在一个内部添加文本rect,并获得自动文本换行我选择使用HTML.foreignObject可以在这里找到描述.

我正在使用D3,这是我的数据:

var cds = [

{"uid":"U12","sid":"16","statement":"Movies","x":10,"y":10},

{"uid":"U20","sid":"17","statement":"Food","x":10,"y":170},

{"uid":"U22","sid":"15","statement":"Sport","x":10,"y":330}

];

我为每个数据添加一张卡片,并希望显示数据中的"语句".

var cardsize = { width : 150, height : 150 };

var svg = d3.select("body").append("svg:svg")

.attr("width", 170)

.attr("height", 490);

var card = svg.selectAll("rect")

.data(cds)

.enter().append("svg:g")

.attr("class", "card")

.attr("transform", function(d,i) {

d.x = 10;

d.y = 10+i*(10+cardsize.height);

return "translate(" + d.x + "," + d.y + ")";

});

card.append("svg:rect")

.attr('width', cardsize.width)

.attr('height', cardsize.height)

card.append("svg:foreignObject")

.attr('width', cardsize.width)

.attr('height', cardsize.height)

.append('p')

.attr("class","statement")

.text(function(d) { return d.statement; });

卡的输出是这样的:

<

p class="statement">Sport

我无法在我测试的(mac)浏览器中看到该文本(Safari 6.0.2,Chrome 25.0.1364.99,Firefox 18.0.2).W3的验证器不喜欢输出,并为每张卡给我这个错误:

在此上下文中,元素foreignObject不允许作为元素g的子元素.

所以我的问题是,问题出在哪里,为什么不允许foreignObject作为g元素的子元素？

我也想知道为什么.html(function(d) { return d.statement; });不起作用(没有输出).但.text(function(d) { return d.statement; });工作正常吗？

这是一个小提琴.