dc.js Vue 渲染图表不正确

Posted 2023-02-22

【中文标题】dc.js Vue 渲染图表不正确

【英文标题】：dc.js Vue renders chart incorrect

【发布时间】：2021-02-13 19:00:50

【问题描述】：

我尝试在 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>

外观：

应该是什么样子：

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

【问题讨论】：

npm 会将 CSS 安装到 node_modules/dc/dist/style/dc.css。我不太了解 Vue，但这里有一个 Q&A about importing CSS in Vue 2

【参考方案1】：

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

将这行代码写入ma​​in.js

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

【讨论】：

非常感谢先生！ ??