8

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 にリンク/ドロップできるものとできないもの、およびその理由を理解することです。

4

1 に答える 1

12

CSS プロパティは次のように設定され.styleます。

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

作成します

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

それ以外の

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

固定フィドル

ドキュメント

于 2013-07-28T16:47:46.110 に答える