使用d3.js和CSS应用属性的区别是什么?

8
我正在测试使用d3.js创建的SVG中包含文本的foreignObject。
为什么通过CSS创建的div的属性有效,但是使用d3.js应用时无效?
我已经创建了一个fiddle: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中的内容以及为什么不能。
1个回答

12

CSS属性可以使用.style来设置:

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

将创建

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

而不是

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

固定的样例

文档


2
回答楼上的问题,.attr是用来设置标签属性而不是样式规则的。 - nrabinowitz
2
那么哪个更好?选择其中一个是否有任何性能优势? - DollarAkshay

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接