我正在测试使用d3.js创建的SVG中包含文本的foreignObject。
为什么通过CSS创建的div的属性有效,但是使用d3.js应用时无效?
我已经创建了一个fiddle:http://jsfiddle.net/g6FXY/ 以下是JS代码:
我不理解。这是命名空间的问题吗?检查对象显示结果页面中相同的HTML代码,但是使用CSS时,页面会注意此值,而使用d3.js则选择另一个值。
我错过了什么?
目标是了解我可以链接/放置到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中的内容以及为什么不能。