vuejs + d3: select returns 元素，但 attr() returns 为空

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 中，我正在尝试 return 所选元素的属性（带有 .plot class 的元素）

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

显然，d3 设法获得了一个 node（因为它是实际元素，所以我一直在寻找加上选择 return 只有一个元素，我再次在寻找）。但是当 d3 尝试 return getAttribute 的值时，前 returns null 和 hasAttribute returns false。但是 Chrome 调试器发现该元素具有这些属性：

显然我遗漏了什么！所以我的问题是：我做错了什么？

Answer 1

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

如果您对元素的 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;
}

vuejs + d3: select returns 元素，但 attr() returns 为空

vuejs + d3: select returns element, but attr() returns null

javascript

getattribute

d3.js

vuejs2