如何用d3创建一个可重用的Vue组件？

Question

我正在尝试创建一个基于D3的Chart.vue组件。我需要能够将多个实例添加到单个页面并将每个实例分开。

我尝试将使用uuid生成的ID分配给在模板中包装我的组件的div：

<template>
  <div :id=this.id>
    <svg></svg>
  </div>
</template>

该ID是在创建组件时创建的。

<script>
import * as d3 from "d3";
import { v4 as uuidv4 } from "uuid";

export default {
  ...
  created () {
    this.id = uuidv4()
  }, 
  ...

当对从父< code>App.vue作为< code>props传入的数据进行更新时，会重新呈现该图表。选择“正确的”<代码>

  methods: {
    renderChart(chart_data) {
      const svg_width = 1000;
      const svg_height = 600;
  
      const svg = d3
        .select("#" + this.id)
        .select("svg")
        .attr("width", svg_width)
        .attr("height", svg_height);
      ...

继续添加所有轴、数据等。

如果我将两个这样的组件添加到我的App.vue模板：

<template>
  <div id="app">
    <form action="#" @submit.prevent="getIssues">
      <div class="form-group">
        <input
          type="text"
          placeholder="owner/repo Name"
          v-model="repository"
          class="col-md-2 col-md-offset-5"
        >
      </div>
    </form>
    <Chart :issues="issues" />
    <Chart :issues="issues" />
  </div>
</template>

我看到它们被添加到DOM中，并带有一些已经创建的uuid。当更新数据并执行＜code＞renderChart数据的副本，但我只看到创建了一个图表。

我对JavaScript、Vue和D3都是新手，所以可能用了错误的方法，但看起来应该可以吗？

感谢任何帮助。

Answer 1

好吧，我似乎已经找到了一个解决方案，尽管我不完全理解它，我不确定为什么最初的方法不起作用（注意：原始方法有时似乎有效，但行为是不可预测的）。

为了解决这个问题，我从父模板向组件传递一个唯一的ID作为道具，并将其添加为图表组件

在应用程序中，vue：

<template>
  <div id="app">
    <form action="#" @submit.prevent="getIssues">
      <div class="form-group">
        <input
          type="text"
          placeholder="owner/repo Name"
          v-model="repository"
          class="col-md-2 col-md-offset-5"
        >
      </div>
    </form>
    <Chart id="chart1" :issues="issues" />
    <Chart id="chart2" :issues="issues" />        
  </div>
</template>

现在，我需要在< code>Chart.vue的< code>props中添加< code>id，并在< code>data()部分设置一个变量。

<template>
  <div :id=chart_id>
    <svg></svg>
  </div>
</template>

<script>
import * as d3 from "d3";

export default {
  name: 'Chart',
  props: ["issues", "id"],
  
  data() {
    return {
      chart: null,
      chart_id: this.id
    };
  },
  ...

我不确定uuid方法为什么不起作用，但这似乎更健壮。