javascript - vuejs + d3 : select returns element, 但 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 设法获得了一个节点(因为它是实际元素，所以我一直在寻找，加上选择仅返回一个元素，这也是我一直在寻找的元素)。但是当 d3 尝试返回 getAttribute 的值时，前者返回 null，而 hasAttribute 返回 false。但 Chrome 调试器发现该元素具有这些属性:

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

Answer 1

这是一种误解，因为您的节点上没有属性 tagName。您在控制台中看到的是 tagName Element的属性(property)你选择了。当您选择元素时(如第二个屏幕截图所示)，有两个属性，即 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;
}