javascript - 我想在组件中使用 vue-d3-charts 呈现条形图，但条形图未呈现

Question

我想渲染一个简单的条形图。

我正在学习如何通过在我的 vue.js 应用程序的组件中使用 vue-d3-charts 来使用 D3 模块进行数据可视化。

我创建了一个bar-chart组件并将其导入我的应用程序，但它不会呈现实际的条形图。当我使用开发工具检查条形图时，我可以看到条形图的关联 div 和 svg，但图表不会呈现到页面上。

模块文档可以在这里找到-> https://saigesp.github.io/vue-d3-charts/#/

这是我的 app.vue：

<template>
  <main id="app">
    <bar-chart />
    <section class="products">
      <!-- A prop called product which takes the object product created in the for loop - in turn creating a prop that contains one product item from the products object-->
      <product-card
        v-for="product in products"
        :key="product.color"
        :productDataProp="product"
      />
    </section>
  </main>
</template>

<script>
import ProductCard from "./components/ProductCard.vue";


import BarChart from "./components/BarChart.vue";

export default {
  name: "App",
  components: {
    ProductCard,
    BarChart,
  },
  data() {
    return {
      products: [
        {
          title: "Nike Air Max",
          color: "green",
          bgtext: "NIKE",
          src: require("./assets/green-shoe.png"),
        },
        {
          title: "Nike flex",
          color: "blue",
          bgtext: "AIR",
          src: require("./assets/blue-shoe.png"),
        },
        {
          title: "Nike Roche Runs",
          color: "pink",
          bgtext: "MAX",
          src: require("./assets/pink-shoe.png"),
        },
      ],
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "montseratt", sans-serif;
}
main {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.products {
  display: flex;
  max-width: 1280px;
  padding: 25;
  margin: 0 auto;
}
</style>

这是我的bar-chart组件：

<template>
  <div class="bar-chart">
    <D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>
  </div>
</template>
<script>
import { D3BarChart } from "vue-d3-charts";

export default {
  name: "BarChart",
  components: { D3BarChart },
  data() {
    return {
      chart_config: {
        key: "name",
        value: "total",
        color: { current: "#41B882" },
        transition: { ease: "easeBounceOut", duration: 1000 },
      },
      chart_data: [
        {
          iphone: 123,
          android: 208,
          when: "2019-08-01",
        },
        {
          iphone: 165,
          android: 201,
          when: "2019-09-01",
        },
      ],
    };
  },
};
</script>

谢谢

标签： javascriptvue.jsd3.js