使用d3.js与css应用属性之间的区别？

Question

我正在使用d3.js在SVG中测试包含带文本div的foreignObject.

为什么css创建的div的属性有效,但在使用d3.js时却没有？

我创造了一个小提琴:http://jsfiddle.net/g6FXY/

这是js代码:

var body = d3.select("body");

var svg = body.append("svg")
  .attr("width", '100%')
  .attr("height", '100%')

var html = svg.append("foreignObject")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 300)
  .attr("height", 200)
.append("xhtml:div")
  /*.attr set height doesn't. */
  /*.attr("overflow-y", "scroll") 
  .attr("height", "150px") */

.html("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.</p>");

和css:

div {
  font: 14px Helvetica Neue;    
  overflow-y: scroll;
  width: 200px;
  /* CSS set height works. */ 
  height: 150px;
}

我不明白.这是名称空间吗？检查对象显示来自结果页面的相同html代码但是使用css页面会关注此值,而使用d3.js则会选择另一个值.

我错过了什么？

目标是了解我能做什么,不能链接/放入foreignObject以及为什么.

Answer 1

CSS属性设置为.style:

.append("xhtml:div")
   .style("height", "250px")

将创造

<div style="height: 250px;"></div>

代替

<div height="250px"></div>

固定小提琴

文档