具有等效代码的不同DOM结构

Question

据我所知，下面这两个片段应该是等价的。这两个变量都创建了一些变量，添加了一个svg元素，追加了一个group元素，并附加了第二个group。

案例1：

var margin = {top: 15, bottom: 15, left: 50, right: 50},
    height = 350,
    width = 800;

var svg = d3.select("body").append("svg")
    .attr('height', height + margin.top + margin.bottom)
    .attr('width', width + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");

案例2：

var margin = {top: 15, bottom: 15, left: 50, right: 50},
    height = 350,
    width = 800;

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

svg.attr('height', height + margin.top + margin.bottom)
    .attr('width', width + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");

但是，在第一种情况下，第二个group元素是第一个group的子元素，即DOM具有以下结构：

<svg height="380" width="900">
    <g transform="translate(50,15)">
        <g class="x axis" transform="translate(0,350)">

在第二种情况下，这两个group都是svg元素的子元素：

<svg height="380" width="900">
    <g transform="translate(50,15)">
    <g class="x axis" transform="translate(0,350)">

Answer 1

在第一种情况下，返回svg变量中附加的组。这是我经常遇到的一个问题。

var svg = d3.select("body").append("svg")
    .attr('height', height + margin.top + margin.bottom)
    .attr('width', width + margin.left + margin.right)
  .append("g")  // you get this object back
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");