vuejs + d3：select返回元素，但attr（）返回null

Question

我有点困惑，请帮我解决一个问题。

我正在使用 VueJS + d3.js。

我的代码如下所示：

<template>
  <div class='chart-frame-chart-comp border-black-1 border-radius-1'>
    <div class='plot'>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'chart-frame-chart-comp',

  mounted () {
    this.$nextTick(this.plot)
  },

  methods: {
    plot () {
      console.log(this.getPlotSize())
    },

    getPlotSize () {
      let a = d3.select('.chart-frame-chart-comp .plot')
      console.log('a', a)
      let b = a.attr('tagName')
      console.log('b', b)
      return b
    }
  }
}
</script>

在getPlotSize 中，我试图返回选定元素的属性（具有.plot 类的元素）

所以在调试器中，我看到了输出：

显然，d3 设法获得了一个node（因为它是实际元素，所以我一直在寻找 plus selection 只返回一个我一直在寻找的元素）。但是当 d3 尝试返回 getAttribute 的值时，前者返回 null 而 hasAttribute 返回 false。但是 Chrome 调试器会看到该元素具有这些属性：

显然我错过了一些东西！所以我的问题是：我做错了什么？

Answer 1

这是一种误解，因为您的节点上没有属性 tagName。您在控制台中看到的是您选择的Element 的tagName 属性。在您选择元素时（如第二个屏幕截图所示），有两个属性，即class 和data-v-391ae376。因此，.getAttribute("tagName") 和 D3 的 .attr("tagName") 都不会返回任何值。

如果您对元素的tagName 感兴趣，您可以简单地调用selection.node() 来获取选择中的第一个元素，然后访问其tagName 属性。在您的示例中，这将打印"div"。

getPlotSize () {
  let a = d3.select('.chart-frame-chart-comp .plot');
  console.log('a', a);
  let b = a.node().tagName;   // Get the DOM node and read its tagName property
  console.log('b', b);
  return b;
}