javascript - 具有等效代码的不同 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 + ")");