Не могу сделать D3 график в Vue.js реактивный
Я хочу сделать график 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 в mounted (), все отображается так, как ожидалось. Итак, у меня есть наблюдатель в моем детском компоненте:
watch: {
data() {
this.renderChart();
}
Поэтому, когда я добавляю консоль.войти т. е. в data() и сохранить компонент в моей IDE, компонент показывает реактивное поведение и обновляет график, но я не могу понять, почему это не происходит автоматически. Есть ли что-то или мне скорее рефакторинг и положить эти вызовы API в мой дочерний компонент?
Я получил график d3 из этого РЕПО на github и изменил его для своей цели. Поэтому vue-loader используется для инкапсуляции Sass, но я сомневаюсь, что из-за этого есть какие-либо помехи. Любая помощь будет принята с благодарностью.