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

互いに重ならないようにするにはどうすればよいですか。最初の1つを表示し、次にその下部に次の1つを表示するだけです...

4

2 に答える 2

2

1つの方法は、2つの別々のsvg要素を作成し、それらを両方とも本体に追加することです。デモについては、この要点を参照してください。各svg変数には独自の名前（svgOneおよびsvgTwo）があることに注意してください。

于 2013-03-24T17:33:05.160 に答える
1

あなたの質問には2つのオプションがあります：

  1. 異なるSVG要素：上記の私の友人が指摘したように、異なるクラス名を持つ2つの異なる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の次の投稿を見ることができます： gコンテナを使用した再描画関数

于 2013-03-24T17:56:38.140 に答える