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

I have a piece of D3.js code that draws a chart, and it width,height,etc.. are set like this:

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

And it draws fine on the page. To be exact: The script tag from this source: https://github.com/mhemesath/r2d3/blob/master/examples/scatterplot/scatterplot.html

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

Then I copy-paste another piece of D3.js code that draws a bar chart and its width, height, etc... are set like this:

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

<script type="text/javascript">

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

To be exact: The script tag from this source code: http://alignedleft.com/content/3.tutorials/10.d3/130.making-a-bar-chart/demo/10.html

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

How can I tell them not to overlap each other, I just simply want them for first one to show, then at the bottom of it the next one to show...

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

2 个解决方案

#1

One way is to create two separate svg elements and append them both to the body. See this gist for a demonstration. Notice each svg var has its own name (svgOne and svgTwo).

一种方法是创建两个单独的svg元素并将它们都附加到正文。请参阅此要点以进行演示。请注意,每个svg var都有自己的名称(svgOne和svgTwo)。

#2

There are two options for your questions :

您的问题有两种选择:

DIFFERENT SVG ELEMENTS : As pointed out by my friend above you can put in two different svg tags with different class name.

不同的SVG元素:正如我上面的朋友所指出的,你可以输入两个不同类名的svg标签。
```
var svg1 = d3.select(body)
              .append(svg)
              .attr('class', 'chart1')

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

Then you can just use the variable

然后你可以使用变量

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

Using Grouping (G) Tag: This allows you to group various charts in the svg but different G tags . You can think of them as Div tags for the Html.

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

You can see following post for d3: redraw function with g containers

你可以看到d3的以下帖子:带有g容器的重绘功能

#1