vuejs 范围样式不适用于 d3js答案

【问题标题】：vuejs scoped styles not working with d3jsvuejs 范围样式不适用于 d3js
【发布时间】：2019-01-28 18:17:44
【问题描述】：

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

<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

提前致谢！

【问题讨论】：

也许指定 vue 的深层子选择器会起作用？例如svg >>> .rect { ... }.
@CoderinoJavarino 它正在工作！但这被认为是一种好的做法吗？
你的 svg 选择器仍然有作用域，所以样式不应该泄漏到组件之外。我认为这没有任何缺点。

标签： d3.js vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您只想为条形着色，则不需要显式 css。你可以设置：

.style("fill", function(d) { return 'blue'; })

在你的酒吧。

【讨论】：

常量不需要函数
没错，只是把它留在那里，这样人们就可以看到它不需要每个条的颜色都相同。