dc.js Vue渲染图表不正确

Question

我尝试在Vue组件中使用dc.js。为什么我的线图有黑色填充区域，为什么笔刷看起来与普通的笔刷工具如此不同。我从普通的Javascript项目复制了此代码。

<template>
  <div>
    <div id="lineChart"></div>
  </div>
</template>

<script>
import crossfilter from "crossfilter2";
import * as d3 from "d3";
import * as dc from "dc";
const axios = require("axios").default;

export default {
  data() {
    return {
      signalData: null,
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    generateChart(data) {
      var linechart = new dc.LineChart("#lineChart");

      var dataModel = Object.keys(data).map(function (d) {
        return {
          key: +d,
          value: data[d],
        };
      });

      var cf = crossfilter(dataModel);

      var dimension = cf.dimension(dc.pluck("key"));
      var group = dimension.group().reduceSum(function (d) {
        return d.value;
      });

      linechart
        .width(null)
        .height(330)
        .x(d3.scaleLinear().domain([0, Object.keys(data).length]))
        .brushOn(true)
        .dimension(dimension)
        .group(group)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .elasticY(true)
        .renderArea(false);

      dc.renderAll();
    },

    fetchData() {
      axios
        .get("http://localhost:3000")
        .then((res) => {
          this.generateChart(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>

外观：

外观如何：

这可能是一种版本问题吗？我该如何解决？

Answer 1

如注释所示，答案是将dc.css文件包含到vue项目中。

将此行代码写入 main.js

require("../node_modules/dc/dist/style/dc.css")