D3.js v5获取已创建rect元素报错，原v3代码失效求助

嘿，我明白你的困扰！这个错误是因为D3.js从v4版本开始重构了选择器对象的结构，和v3的用法不一样了，咱们一步步来解决：

为什么会报错？ #

在D3 v3里，d3.select()返回的是一个伪数组对象，所以你可以用[0][0]直接取出底层的DOM元素。但到了v4和v5，D3的选择器对象不再是这种数组结构，rectangleElement[0]会返回undefined，自然就会抛出Cannot read property '0' of undefined的错误了。

正确的解决方案 #

你其实有两种简单的方式来处理：

1. 直接使用已有的D3选择器对象
   你创建的rectangleElement本身就是这个rect元素的D3选择器，完全不需要重新用d3.select()获取，直接用它操作元素就行：

   // 比如给矩形设置填充色
   rectangleElement.attr('fill', 'blue');
   

2. 获取底层DOM元素再包装（如果确实需要）
   如果你一定要重新获取这个元素的D3选择器，可以用node()方法取出单个DOM元素（因为你只append了一个rect）：

   var rect = d3.select(rectangleElement.node());
   

   如果是多个元素的选择器，就用nodes()方法获取DOM元素数组，再取对应索引：

   // 假设有多个rect，取第一个
   var firstRect = d3.select(rectangleElement.nodes()[0]);
   

总结 #

D3 v4+的API做了不少优化，选择器对象的访问方式是其中一个关键变化，记住用node()（单个元素）或nodes()（多个元素）来获取底层DOM元素就好啦！

内容的提问来源于stack exchange，提问作者S M Abrar Jahin