d3.js - 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>

它的输出是:-

scoped css output

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

global css output

提前致谢!

Answer 1

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