在页面上将两个元素 - 图表 - 放在彼此下方答案

【问题标题】：Placing two elements - charts - under each other on the page在页面上将两个元素 - 图表 - 放在彼此下方
【发布时间】：2013-03-24 17:06:29
【问题描述】：

我有一段绘制图表的 D3.js 代码，它的宽度、高度等设置如下：

<script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

它在页面上画得很好。 确切地说：来自此来源的脚本标签： https://github.com/mhemesath/r2d3/blob/master/examples/scatterplot/scatterplot.html

然后我复制粘贴另一段绘制条形图的 D3.js 代码，其宽度、高度等设置如下：

<script type="text/javascript">

    //Width and height
    var w = 500;
    var h = 100;
    var barPadding = 1;

确切地说：来自此源代码的脚本标签： http://alignedleft.com/content/3.tutorials/10.d3/130.making-a-bar-chart/demo/10.html

我如何告诉它们不要相互重叠，我只是想让它们显示第一个，然后在它的底部显示下一个...

【问题讨论】：

更多上下文会有所帮助。您是否将两个图表附加到同一个 div 或父 svg 元素中？
@AndrewStaroscik：不，它们是各自脚本标签内的两段独立代码，我已经从网上获取了它们，请等一下，我可以给你它们的直接链接。感谢您的帮助。
@AndrewStaroscik ：更新了问题，链接到两个图表的完整源代码。

标签： javascript css svg d3.js

【解决方案1】：

一种方法是创建两个单独的 svg 元素并将它们都附加到正文中。见this gist for a demonstration。请注意，每个 svg var 都有自己的名称（svgOne 和 svgTwo）。

【讨论】：

谢谢，我会试试的，但是有一个问题：我从两个不同的来源复制粘贴的代码，每个都在它自己的脚本博客中，所以当我把它们放在代码中时，我有两个单独的脚本再次标记，所以我仍然需要更改 SVG 名称，尽管它们位于不同的脚本块中？
我将您的答案标记为正确，因为我做到了，而且效果很好。但是，如果您有时间，也请回答我在上面评论中提出的问题。谢谢 Cuase，现在对我来说这似乎是个谜：)
我不知道为什么它不起作用。我使用您感兴趣的代码创建了另一个要点bl.ocks.org/andrewStaroscik/5232876。图表正在为我堆叠。

【解决方案2】：

您的问题有两种选择：

不同的 SVG 元素：正如我上面的朋友所指出的，您可以放入两个具有不同类名的不同 svg 标签。

var svg1 = d3.select(body)
              .append(svg)
              .attr('class', 'chart1')

var svg2 = d3.select(body)
          .append(svg)
          .attr('class', 'chart2')

那么你可以只使用变量

          svg1.append('rect').data().enter()
          svg2.append('rect').data().enter()

使用分组 (G) 标签：这允许您对 svg 中的各种图表进行分组，但使用不同的 G 标签。您可以将它们视为 Html 的 Div 标签。

您可以看到以下关于 d3 的帖子： redraw function with g containers

【讨论】：

谢谢，现在我发布了关于此代码的另一个问题，在 IE 中图表显示在彼此下方，没有新行...在任何其他浏览器中然后显示为同一行上的内联元素...我也会用新问题更新此评论。
以上问题。我建议将它们保存在相同的脚本标签中。而且，如果您仍然保留在同一个块中，则必须保留不同的变量名。整个文档将使用公共变量空间，直到您再次加载网页。
每个浏览器都有自己的样式表，它会呈现代码中的特定标签。我不确定您所说的问题，但请尝试在 google 中搜索 CSS RESET SCRIPTS
谢谢，这是新问题：stackoverflow.com/questions/15602028/… 非常欢迎您发表您的想法作为该问题的答案，我们会尝试。谢谢。