Javascript 在d3中获取元素的属性并不优雅

以下是我的代码片段：

我试图理解如何使用d3获得DOM对象的属性。在本例中，在对象返回事件之后。例如，我如何访问'x1'属性

var svg = d3.select('svg')
  .append('polyline')
  .attr('x1', 20)
  .attr('y1', 100)
  .attr('x2', 100)
  .attr('y2', 100)
  .attr('points', "20,100 100,100 100,100 180,100")
  .attr('fill', 'none')
  .attr('stroke', palette.gray)
  .attr('marker-start', "url(#triangle)")
  .attr('marker-mid', "url(#triangle)")
  .attr('marker-end', "url(#triangle)")
  .on('click', function(){
        console.log('polyline click');
        console.log(this);            
  });

我曾经

console.log（这个['x1']）；--返回“未定义”

console.log（this.attr（'x1'）；--TypeError:this.attr不是函数

console.log（this.property（'attr'）；--TypeError:this.property不是函数

我最终发现解决方案是使用：

d3.select（this.attr（“cx”）

什么是“this”？如果我将“this”打印到控制台，我似乎会将DOM对象作为

<polyline x1="20" y1="100" x2="100" y2="100" points="20,100 100,100 100,100 180,100" fill="none" stroke="#708284" marker-start="url(#triangle)" marker-mid="url(#triangle)" marker-end="url(#triangle)">

---

再次选择元素似乎有点“黑”。我错过了一个技巧吗？

没有，你没有错过任何东西

这确实是您记录的DOM元素，问题是
attr（）
是D3函数，特别是在D3.selection上

您需要做的是将DOM元素转换为一个选择，这样您就可以利用d3助手函数

d3.选择（此）
您没有遗漏任何内容。
.attr
是d3选择中的一种方法，因此您当然必须再次选择。JavaScript约定，
此
应该是事件发生的元素。例如，JQuery遵循相同的模型。如果您不想选择，请直接执行：
this.getAttri但是（'x1'）；
woah我使用了getAttribute（），我想我的大脑爆炸了（它工作了）。那么“this”是对DOM元素的标准化引用，因此也可以通过javascript和JQUERY访问？是的，
this
这里是一个标准。然后，你可以用
d3将其转换为
d3
选择。选择（这个）
或者如果需要，使用带有
$（this）
的jQuery对象，或者根据需要使用它。您可能还会发现
d3。选择（this）
相当于您当前拥有的
svg
方式。您正在分配
的结果。将
附加到
svg
，这将是多段线。Imran-如果我的答案有帮助，您愿意接受吗？如果没有，您还需要更多详细信息吗？