d3.js - 为什么我的SVG标签被添加到HTML标签内

Question

关于此日历示例，还有其他问题： Calendar View - http://bl.ocks.org/mbostock/4063318

我正在根据我的目的调整这个例子。 我在页面中添加了一个DIV，我希望SVG进入该div。 这是我修改过的代码段：

var svg = d3.select("#chart") 
    .data(d3.range(2013, 2015))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "RdYlGn")
  .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

它实际上仍然有效，但SVG不会进入DIV。

您可以在此处查看我的示例Plunker：http://plnkr.co/edit/hkvNyC?p=preview

代码如下所示：

代码有什么问题？ 如何将SVG放入DIV？

Answer 1

选择.selectAll('svg')后，您错过了div。

var svg = d3.select("#chart")
  .selectAll('svg')    // <-- You want to operate on set of SVG elements
    .data(d3.range(2013, 2015))
  .enter().append("svg")

工作演示：http://plnkr.co/edit/2SwqI8gW2UaGIdlHvX2Y?p=preview

另外，作为一般规则，最好在加载DOM之后运行更改DOM 的Javascript代码。我已将运行代码的script代码移至body代码的底部，以便将div#chart放入DOM中d3.select('#chart')进行查找。