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 + ")");

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

1 个答案: