1

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

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

4

2 回答 2

2

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

于 2013-03-24T17:33:05.160 回答
1

您的问题有两种选择：

  1. 不同的 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()
  1. 使用分组 (G) 标签：这允许您对 svg 中的各种图表但不同的 G 标签进行分组。您可以将它们视为 Html 的 Div 标签。

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

于 2013-03-24T17:56:38.140 回答