Html 选择（“svg”）-两个备选方案之间的差异

我对此有点困惑。我以为它们是等价的表达，但显然不是。下面是做饼图的一段代码的起始行。这很好，转换将图表移动到svg的中心

var width = 280,
    height = 200,
    radius = Math.min(width, height) / 2;

var svg = d3.select("#pie")
    .select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

然而，我试图将

宽度

和

高度

移到js代码之外的index.html文件中。下面的代码应该可以实现这一点，但我在这里遗漏了一些东西。图表以svg左上角为中心结束。作为一个饼图，你最终只能看到一个象限。我已仔细检查，并且

宽度

和

高度

都具有所需的值。这是html页面中的相关部分：

<div class="chart-stage" id="pie">
      <svg width="280" height="200"></svg>
</div>

---

第一和第二代码块中的选择不同。在第一个

svg

中，svg指的是具有变换的

g

元素的选择。在第二个

svg

中，svg指的是

svg

元素的选择。此

svg

元素包含一个子

g

和一个转换，但使用

svg.append（）

将向该

g

添加一个同级：

var svg = d3.select("#pie")
        .select("svg")

var width = +svg.attr("width"),
    height = +svg.attr("height")

svg = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

这里的

svg

是一个选中的

g

元素

var svg = d3.select("#pie")   // return a selection of the element with id pie
            .select("svg");    // return a selection of the svg

此处的

svg

是一个选定的

svg

——一旦完成初始链接，后续操作：

svg.attr（）.append（）

不会更改变量的定义

要使第二个示例的结果与第一个示例相同，可以将

svg

变量重新定义为子

g

的选择：

var svg = d3.select("#pie")
        .select("svg")

var width = +svg.attr("width"),
    height = +svg.attr("height")

svg = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

---

尽管如此，将该变量称为

g

可能更清楚，因为它是

g

的选择，而不是

svg

选择

svg

在每个示例中包含不同的内容。在第一个

svg

中选择了

g

作为

。append（“g”）

返回一个包含新添加的

g

的选择。在第二个示例中，

svg

是对svg的选择（该svg恰好包含一个

g

）。如果在第一个代码块中将内容附加到

svg

，它将附加到转换后的

g

，而在另一个代码块中，它通过附加到svg本身将兄弟项附加到转换后的

g

。谢谢Andrew。我想我明白了，但不完全明白。因此，如果我用width=+d3.select（“#pie”）.select（“svg”）.attr（“width”）这样的值设置width/height，然后像第一段代码中所示的那样继续（当然忽略var width=280），因为我们刚刚设置了它，这是否合理？（虽然它可以工作…）我不确定是否完全遵循了注释-但是为了使第二个代码块的结果与第一个代码块的结果相同，您可以使用

svg=svg.append（“g”）.attr（“transform”），…

（无需使用

svg.attr（“width”，width）。attr（“height”，height）设置svg的高度/宽度）

它们已经在svg元素的属性标记中设置好了）。这样，选择的

svg

引用了

g

元素，就像在第一个代码块中一样，任何附加了

svg.append（）

的内容都将作为该

g

的子元素翻译到中心。当然，非常感谢！（嗯，我现在怎么接受这个答案？）

var svg = d3.select("#pie")
        .select("svg")

var width = +svg.attr("width"),
    height = +svg.attr("height")

svg = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");