Differenza tra l'applicazione dell'attributo con d3.js vs css?

Question

Sto testando un ForeignObject, contenente un div con testo, all'interno di un SVG, creato usando d3.js.

Perché gli attributi per un div creati da css funzionano ma non quando vengono applicati utilizzando d3.js?

Ho creato un violino: http://jsfiddle.net/g6FXY/

Ecco il codice 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>"); 

e css:

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

Non capisco. Questa è una cosa dello spazio dei nomi? Ispezionare l'oggetto mostra lo stesso codice html dalla pagina risultante, ma con css la pagina presta attenzione a questo valore e con d3.js sceglie un altro valore.

Cosa mi manca?

L'obiettivo è capire cosa posso e non posso collegare/rilasciare in un oggetto straniero e perché.

Answer 1

proprietà CSS sono impostate con .style:

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

creerà

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

invece di

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

fixed fiddle

docs