Question

我正在尝试使用Typescript和D3.js库创作VueJS。

我设法显示图表，但Typescirpt给了我很多错误

这是我的代码：

<input type="text" name="user" id="user" onkeyup="checkLang();">
<script>
function checkLang(){
    var user = document.getElementById("user");
    if(/^[a-zA-Z0-9- ]*$/.test( user.value ) == false) {
        alert("You've entered non English character[s]");
    }
}
</script>

这是我收到的错误列表：List of errors

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

import * as d3 from "d3";
import * as d3select from 'd3-selection';

@Component
export default class HomeComponent extends Vue {

name: 'non-vue-line-chart'
data() {
    return {
        chartData: [99, 71, 78, 25, 36, 92],
        line: '',
    };
}

getScales(){
    const x = d3.scaleTime().range([0, 430]);
    const y = d3.scaleLinear().range([210, 0]);
    d3.axisLeft().scale(x);
    d3.axisBottom().scale(y);
    x.domain(d3.extent(this.data().chartData, (d, i) => i));
    y.domain([0, d3.max(this.data().line, d => d)]);
    return { x, y };
}

calculatePath() {
    const scale = this.getScales();
    const path = d3.line()
        .x((d, i) => scale.x(i))
        .y(d => scale.y(d));
    this.data().line = path(this.data().chartData);
}

mounted() {
    this.calculatePath();
  }
}

有任何建议和解决方案吗？

提前致谢！

Answer 1

我的桌面上没有vue-cli，所以：

npm install --global vue-cli

然后搭建一个空项目：

vue init webpack vuejs-d3  # Picked all defaults except of ESLint preset -- Airbnb
cd vuejs-d3
npm install
npm install d3 --save
npm install @types/d3

然后转到 HelloWorld.vue 并将代码移入其中并稍微修改非常的内容。请注意，我使用 *.vue 文件，因为我喜欢处理Vue的默认值。然而，类型支持工作......

<template>
  <div class="hello">
    <div>{{ chartData }}</div>
  </div>
</template>

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

export default {
  name: 'non-vue-line-chart',
  data() {
    return {
      chartData: [99, 71, 78, 25, 36, 92],
      line: '',
    };
  },


  getScales() {
    const x = d3.scaleTime().range([0, 430]);
    const y = d3.scaleLinear().range([210, 0]);
    d3.axisLeft().scale(x);
    d3.axisBottom().scale(y);
    x.domain(d3.extent(this.data().chartData, (d, i) => i));
    y.domain([0, d3.max(this.data().line, d => d)]);
    return { x, y };
  },

  calculatePath() {
    const scale = this.getScales();
    const path = d3.line()
      .x((d, i) => scale.x(i))
      .y(d => scale.y(d));
    this.data().line = path(this.data().chartData);
  },

  mounted() {
    this.calculatePath();
  },
};
</script>

<style scoped>
h1, h2 { font-weight: normal; }
ul { list-style-type: none; padding: 0; }
li { display: inline-block; margin: 0 10px; }
a { color: #42b983; }
</style>

当我运行npm run dev时，我在Git bash中看不到任何编译错误

当我执行 Ctrl + Space

时，

也不会在VS Code（安装了Vetur插件）中

当我将光标悬停在方法

上时

P.S。以下是我测试过的软件包版本。

全局：

vue-cli@2.9.1

来自package.json：

"dependencies": {
  "d3": "^4.11.0",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"
},

由于我无法重现您的问题，我强烈建议您创建一个plunker或任何其他人可以玩的有形repro。现在，很难看出你的东西有什么问题。抱歉。如果您按照我的步骤操作，应该正常工作。

D3 + VueJs + Typescript |修复错误

1 个答案: