Question

这是我的代码段：

我试图了解如何使用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']）; - 返回'undefined'
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)">

再次选择元素似乎有点'hacky'。我在这里错过了一招吗？

Answer 1

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

this确实是您记录的DOM元素，问题是attr()是D3函数，特别是在d3.selection上。

您需要做的是将DOM元素转换为选择，以便您可以利用d3帮助函数。这样做的方法与你一样

d3.select(this)

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

1 个答案: