Saigesp / vue-d3-charts

D3 charts for Vue
https://saigesp.github.io/vue-d3-charts/
GNU Lesser General Public License v2.1
97 stars 30 forks source link

TypeError: this.tData[i] is undefined when removing item from config.values #15

Open Tiim opened 4 years ago

Tiim commented 4 years ago

Hey First of all thank you very much for this library. It looks so nice :)

I get the following error when I try to remove items from the config.values array dynamically:

[Vue warn]: Error in callback for watcher "config": "TypeError: this.tData[i] is undefined"

found in

---> <D3LineChart>
       <Chart> at src/components/Graph.vue
         <Layout> at src/components/Layout.vue
           <App> at src/App.vue
             <Root> vue.runtime.esm.js:619

TypeError: "this.tData[i] is undefined"
    updateElements vue-d3-charts.esm.js:1061
    tweenValue tween.js:75
    default each.js:5
    tweenValue tween.js:73
    default attr.js:75
    updateElements vue-d3-charts.esm.js:1061
    updateChart vue-d3-charts.esm.js:469
    resizeChart vue-d3-charts.esm.js:481
    updateConfig vue-d3-charts.esm.js:491
    handler vue-d3-charts.esm.js:58
    VueJS 11
    select SelectStats.vue:38
    click SelectStats.vue:16
    VueJS 26
    _callee$ App.vue:21
    tryCatch runtime.js:45
    invoke runtime.js:274
    method runtime.js:97
    node_modules asyncToGenerator.js:12
    node_modules asyncToGenerator.js:34
    promise callback*asyncGeneratorStep@webpack-internal:///./node_modules/ asyncToGenerator.js:22
    node_modules asyncToGenerator.js:34
    node_modules asyncToGenerator.js:41
    node_modules asyncToGenerator.js:30
    mounted App.vue:20
    VueJS 11
    <anonymous> main.js:8
    js app.js:1336
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1372
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861
    <anonymous> app.js:864
vue.runtime.esm.js:1888

My vue component looks like this:

<template>
  <div>
    <SelectStats @selection="selected" :data="data" />
    <div class="chart-container">
      <D3LineChart v-if="data" :config="config" :datum="data" />
    </div>
  </div>
</template>

<script>
import { D3LineChart } from "vue-d3-charts";
import SelectStats from "./SelectStats";
export default {
  name: "Chart",
  components: { D3LineChart, SelectStats },
  props: {
    data: { type: Array, required: false }
  },
  data() {
    return {
      config: {
        ...
        values: []
      }
    };
  },
  methods: {
    selected(arr) {
      this.config.values.splice(0, this.config.values.length, ...arr);
      console.log(this.config);
    }
  }
};
</script>

I have a faily small repo that currently has the problem here

Saigesp commented 3 years ago

Hi @Tiim, thanks for the report, and sorry for my late response.

I haven't been able to work at this library for a long time (no free time). When I have time again I want to simplify many things, and I hope this error will be solved in that refactor.

I'm sorry I can't help you more