为什么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.</p>");

和CSS：

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

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

我错过了什么？

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