D3编码顺序

Question

我不清楚D3 代码必须编写的模式。

例如在下面的代码片段中，如果我在创建 svg 元素后提到代码的第 3 部分（图表标题），我的图表不会不显示标题文本，但如果我在创建 svg 之前提到第 3 部分，它就可以正常工作。

为什么？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

<style>

    circle.dimple-series-1{
    fill: red;
    }    

    h2{
    color: black;
    text-align: center;
    font-family: monospace;
    font-size: 20px;
    }   

    </style>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script type="text/javascript">
      function draw(data) {

      /*
        D3.js setup code
      */

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

          /*TITLE*/

          d3.select("body")
          .append("h2").text("Goals by Year!");

          /*Creating SVG*/

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
            .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          x.dateParseFormat="%Y"
          x.tickFormat="%Y";
          x.timeInterval= 4;
          myChart.addMeasureAxis("y", "attendance");
          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
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

Answer 1

您的标题未添加到 svg 中。您正在将标题 object 附加到 body。我认为一旦您添加了 SVG 它就不会出现的唯一原因是因为它是在 DOM 之后添加的，所以可能看不见？这取决于您的 CSS，但我很确定该元素仍会被添加。

在第一种情况下，您的 DOM 将如下所示：

<body>
    <h2>Goals by Year!</h2>
    <svg>
       <... Dimple Stuff ...>
    </svg>
</body>

在第二种情况下是这样的：

<body>
    <svg>
       <... Dimple Stuff ...>
    </svg>
    <h2>Goals by Year!</h2>
</body>

如果要将标题添加到 SVG 本身，则需要使用 SVG 形状，并且需要定位 SVG 而不是 body。例如：

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin)
        .attr("height", height + margin);

svg.append("text")
    .attr("x", 100)
    .attr("y", 100)
    .style("fill", "black")
    .text("Goals by Year!");

... Dimple Stuff

在这种情况下，您的 DOM 将如下所示：

<body>
    <svg>
       <text x=100 y=100 style="fill:black">Goals by Year!</text>
       <... Dimple Stuff ...>
    </svg>
</body>

编辑：删除注释。 Dimple 在 svg 中使用组似乎没问题。

D3编码顺序

D3 Coding Order

javascript

svg

d3.js

dimple.js