html - 结合两个d3可视化

标签 html css d3.js linechart circle-pack

<分区>

我将两个 d3 可视化组合在一个页面上,需要 CSS 方面的帮助。在这一点上,他们出现在彼此之上,我很沮丧。这两个可视化是:http://bl.ocks.org/mbostock/3883245 :

enter image description here

http://bl.ocks.org/mbostock/4063269 :

enter image description here

此时我刚刚合并了两个 index.html 文件。任何关于我应该如何设置样式以使它们不重叠的指示将不胜感激!

最佳答案

http://jsfiddle.net/dcryan22/GUH4A/

d3.select('body')
.append('svg')
.attr('height', 100)
.attr('width', 100)
.append('rect')
.attr('fill', 'red')
.attr('height', 100)
.attr('width', 100);

d3.select('body')
.append('svg')
.attr('height', 100)
.attr('width', 100)
.append('rect')
.attr('fill', 'blue')
.attr('height', 100)
.attr('width', 100);

SVG 不应与另一个 SVG 重叠。上面的示例在同一个 Body 标签中显示了 2 个基本和独立的 SVG。

我的猜测是您以某种方式重复使用 SVG Canvas ,以便一个渲染在另一个之上。

关于html - 结合两个d3可视化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22764437/

相关文章:

Android 浏览器在后台模式下不支持带有 HTML5 音频的播放列表

html - 悬停在重叠的 CSS3 形状上

jquery - 如何在一组元素周围显示 Angular 边框?

javascript - 如何在误差条图 d3.js 上显示数字

html - Angular:通过单击另一个按钮执行的提交方法

javascript - 从左向右滚动

html - 无法在 Outlook 2013 HTML 电子邮件中正确隐藏图像

javascript - 选项卡式框 - 单独加载内容

javascript - d3js 缩放圆圈组

javascript - D3 circle pack - 向节点添加标签