Question

这是一些代码。它的变量命名很差而且错了。原始示例只有圆圈，这就是选择圆圈但现在它有组的原因。但是此代码目前正常运行。它像我期望的那样绘制正方形和圆形。

使用控制台我看到'circle'是Array[3]但我无法弄清楚元素是什么或它们的类型。自从它启动以来，如果没有创建svg元素，那么它是如何可能的呢？

无论如何，我想知道应该叫什么圈？对“g”进行全选选择似乎给了我同样的效果。我猜测selectAll正在尝试做一个选择并且有0个元素但是继续以某种方式工作或者selectAll实际上返回svg但是在那种情况下我为什么要创建一个新变量。此外，我不完全确定为什么示例和我正在做的数据。圆实际上是否返回了我现在设置数据的内部d3对象？它与svg或dom有什么关系吗？我很困惑为什么我是selectAll并在选择上调用数据。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
</style>

<script src="http://d3js.org/d3.v3.js"></script>
<script>


(function() {

var svg = d3.select('body').append('svg').attr('width', 900);

var circle = svg.selectAll("circle")
    .data([32, 57, 293]);

circle.enter()
.append("g")
.call(function(gs) {
    gs.append("rect").attr("width", 20).attr("height", 20).attr("x", String);
    gs.append("circle").attr("cy", 90).attr("cx", String).attr("r", Math.sqrt);
})
.attr('class', 'test');
circle.exit().remove()

})();

</script>
</body>

Answer 1

circle目前包含三个SVGGElements或"g" s，每个都包含一个圆圈和一个矩形，在您的示例中为 .append -ed。

来自MDN：

g元素是用于对对象进行分组的容器。应用于g元素的转换在其所有子元素上执行。应用的属性由子元素继承。此外，它还可用于定义以后可以使用元素引用的复杂对象。

selectAll("some-container")将返回与该名称匹配的元素，或者将创建一个新元素并将其返回。见https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll

尝试在第27行添加这些内容，以查看圈子的x值：

alert("x1: " + d3.select(circle.selectAll("circle")[0][0]).attr("cx"));
alert("x2: " + d3.select(circle.selectAll("circle")[1][0]).attr("cx"));
alert("x3: " + d3.select(circle.selectAll("circle")[2][0]).attr("cx"));

究竟什么是d3选择？

1 个答案: