0

这是一些代码。它的变量名称很差，而且是错误的。原始示例只有圆圈，这就是为什么选择圆圈但现在它有组的原因。但是，此代码目前可以正常工作。它像我期望的那样绘制正方形和圆形。

使用控制台我看到“圆圈”Array[3]但我无法弄清楚元素是什么或它们的类型。自启动以来，由于没有创建 svg 元素，怎么可能有 3 个？

无论如何，我想知道真正应该叫什么圈子？在“g”上进行全选似乎给了我同样的效果。我猜 selectAll 正在尝试进行选择并且有 0 个元素但继续以某种方式工作，或者 selectAll 实际上返回 svg 但在这种情况下我为什么要创建一个新变量。我也不确定为什么这些例子和我正在做这方面的数据。circle 实际上是否返回了我现在设置数据的内部 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>
4

1 回答 1

0

circle当前包含三个 SVGGElement 或"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"));
于 2013-01-11T21:39:43.467 回答