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

但是就我删除范围属性而言，代码工作正常。新输出：-

global css output

谢谢！

Answer 1

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

Answer 2

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

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

在您的酒吧上。

vuejs作用域样式无法与d3js一起使用

2 个答案: