vuejs 范围样式不适用于 d3js

Question

我正在尝试集成 Vue.js 和 D3.js。我注意到有时 CSS 类并不真正适用于 svg 元素。我在下面给出了 vue 组件的片段。

<template>
<div>
  <h1>Hello world</h1>
  <svg width="300" height="100" ref="barchart"></svg>
</div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "LineChart",
  mounted() {
    d3.select("h1").attr("class","red-text")
    var data = [10,20,15,30,60];
    var barHeight = 20;
    var bar = d3
      .select(this.$refs.barchart)
      .selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("class","rect")
      .attr("width", function(d) {
        return d;
      })
      .attr("height", barHeight - 1)
      .attr("transform", function(d, i) {
        return "translate(0," + i * barHeight + ")";
      });
  }
};
</script>
<style scoped>
.rect{
    fill: blue;
}
.red-text{
  color:red;
}
</style>

其输出为：-

范围的 css 输出

但是当我删除 scoped 属性时，代码工作正常。新输出：-

全局 css 输出

提前致谢！

Answer 1

作用域样式的工作原理是 vue 为 dom 元素分配一个唯一的属性，然后通过为具有该属性的元素添加额外的条件来调整样式规则。vue 指南中的示例。但是，由于使用 d3 动态创建的元素不是由 vue 管理的（因为它们不是模板的一部分），所以它不能开箱即用。解决此问题的一种方法是使用深度选择器（例如svg >>> .rect { ... }），它不会为子元素附加额外的唯一属性标准。