Невозможно сделать граф D3 в Vue.js реактивным - PullRequest
Новая
       9

Невозможно сделать граф D3 в Vue.js реактивным

0 голосов
/ 20 октября 2019

Я хочу сделать граф D3 реактивным, чтобы он отображался при заполнении новых данных. Запросы API для получения новых данных работают нормально, но график не рендерится. Я обнаружил странное поведение, то есть когда я делаю изменения в компоненте диаграммы в своей среде IDE и сохраняю их, отображаются новые данные.

Здесь я инициализирую компонент в моем родителе: 

<div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100">
        <line-chart v-bind="lineChartProps"></line-chart>
      </div>

Это реквизиты, которые я передаю дочернему компоненту: 

computed: {
    dayData() {
      return [
        {
          name: "R1",
          values: [
            {
              date: "00:00",
              value: "0"
            }
          ]
        }
      ];
    },
    lineChartProps() {
      return {
        xAxisLabel: "Timeline",
        yAxisLabel: "Load",
        xKey: "date",
        yKey: "value",
        interval: "minute",
        data: this.dayData
      };

Вот как я заполняю данные: 

methods: {
    async queryLoad() {
      const connect = await Service.connectTo;
      const apiResponse1 = await Service.getLoad("DG1", this.i.toString());
      const apiResponse2 = await Service.getLoad("DG2", this.i.toString());
      const apiResponse3 = await Service.getLoad("R1", this.i.toString());

      if (this.i <= 96) {
        this.dayData[0].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse3.request.response
        });

        this.dayData[1].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse1.request.response
        });
        this.dayData[2].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse2.request.response
        });
        this.i++;
      }
    },
    startInterval() {
      setInterval(async () => {
        console.log("1");
        const load = await this.queryLoad();
        return load;
      }, 8000);
    }

Так что теперь в моем дочернем компоненте я получилреквизиты: 

props: {
    chartId: {
      type: String,
      default: () => `linechart-${Date.now()}`
    },
    colors: { type: Array, default: () => d3.schemeCategory10 },
    width: { type: String, default: "100%" },
    height: { type: String, default: "300px" },
    xAxisLabel: { type: String, default: null },
    yAxisLabel: { type: String, default: null },
    xKey: { type: String, required: true /* date */ },
    yKey: { type: String, required: true /* price */ },
    interval: { type: String, default: "year" },
    data: {
      type: Array,
      default: () => []
    }

Когда я заполняю его начальными значениями и вызываю renderChart в mount (), все отображается как ожидалось. Итак, у меня есть наблюдатель в моем дочернем компоненте: 

watch: {
    data() {
      this.renderChart();
    }

Поэтому, когда я добавляю console.log, то есть в data () и сохраняю компонент в моей IDE, компонент показывает поведение реактива и обновляет графикно я не могу понять, почему это не происходит автоматически. Есть ли что-то, или мне лучше сделать рефакторинг и поместить эти вызовы API в мой дочерний компонент?

Я получил график d3 из этого репозитория на github и изменил его для своих целей. Поэтому vue-loader используется для инкапсуляции Sass, но я сомневаюсь, что из-за этого есть какие-либо помехи. Любая помощь будет принята с благодарностью.

...