8

我正在使用 d3.js 创建的 SVG 中测试一个 foreignObject，其中包含一个带有文本的 div。

为什么由 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 回答