Difference between applying attribute with d3.js vs css?

Question

I'm testing a foreignObject, containing a div with text, within an SVG, created using d3.js.

Why do attributes for a div created by css work but don't when applied using d3.js?

I've created a fiddle: http://jsfiddle.net/g6FXY/

Here's the js code:

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>");

and the css:

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

I don't understand. Is this a namespace thing? Inspecting the object shows the same html code from the resulting page but with css the page pays attention to this value and with d3.js it picks another value.

What am I missing?

The goal is to understand what I can and can't link/drop into a foreignObject and why.

Answer 1

CSS properties are set with .style:

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

will create

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

instead of

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

fixed fiddle

docs