Question

我尝试了d3.js的基本可视化和udacity的凹坑，但是，我观察到了一个无法解释的效果：

我运行一个简单的dimple.js可视化，它嵌入在svg元素中工作正常。当我在svg元素之前加上标题时，...... - 见第27行

d3.select("body").append("h2").text("World Cup Attendance");

... svg元素中的图表似乎被翻译并剪切在底部。为什么添加此行会改变图表？据我所知，SVG元素是一个独立的元素，它有自己的相对坐标系 - 不受前面的html元素的影响......

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>

    <style>
      circle.dimple-series-1 {
        fill: red;
      }
    </style>

    <script type="text/javascript">
      function draw(data) {

      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

        // this line moves the labels of the x axis 
         d3.select("body").append("h2").text("World Cup Attendance");

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                //.attr("transform", "translate(0,-30)")
                .attr('class','chart');
          var data = [
              { "year":"1980", "attendance":245000 },
              { "year":"1984", "attendance":245000 },
              { "year":"1988", "attendance":304400 }
            ];

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");

          x.dateParseFormat = "%Y";
          x.tickFormat = "%Y";
          // x.timeInterval = 4;

          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);
          myChart.draw();
        };

    </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
    draw();
  // d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

Answer 1

我会猜测它是因为这种凹陷方法，＆＃34; dimple._parentHeight＆＃34;。它计算svg的父元素的高度，并有一个firefox问题的解决方法，所以你可以看到基于svg（body，在这个例子中）的容器中有或没有其他元素的容器。< / p>

你最好的选择（以及我因类似原因所做的事情）是将svg包装在一个可以正确计算高度的div中：

       var svg = d3.select("body")
        .append("div")
        .append("svg")

为什么<h2> Header会剪切后续的SVG元素？</h2>

1 个答案: