HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datum</title>
</head>
<body>
<h1>datum</h1>
<svg width="200" height="300">
<circle cx="100" cy="50"></circle>
<circle cx="100" cy="150"></circle>
<circle cx="100" cy="250"></circle>
</svg>
<svg>
</svg>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="selection_datum.js"></script>
</body>
</html>
jvascript代码
let allCircles = d3.selectAll('svg').selectAll('circle');
let radius = 25;
allCircles.datum(radius);
console.log(allCircles); // __data__ doesn't exist.
console.log(allCircles.datum()); // 25
allCircles.datum(null); // remove __data__
console.log(allCircles);
我使用datum()方法将原始数据25绑定到d3对象中。并且我记录了CCD_ 3。显示CCD_ 4。
但第一个控制台日志console.log(allCircles)并没有显示__data__属性。即使下一个控制台日志console.log(allCircles.datum())告诉我它返回25
为什么第一个控制台日志没有显示__data__属性？
看起来像是在对象中__groups的第一个数组下返回了__data__属性。你可以这样阅读它们：
let allCirclesNodes = allCircles['_groups'][0];
for (i=0; i < allCirclesNodes.length; i++) {
console.log(allCirclesNodes[i]['__data__']);
}