Question

我有一段绘制图表的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

我怎么能告诉他们不要互相重叠，我只是想让他们第一个展示，然后在底部展示另一个......

Answer 1

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

Answer 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

在页面上放置两个元素 - 图表 - 在彼此之下

2 个答案: