D3 + VueJs + Typescript | How to import D3.js Library?

Question

I have to create a Dashboard for my customer using VueJS + Typescript and D3.js.

They are using dotnet vue template: 'dotnet new –install Microsoft.AspNetCore.SpaTemplates::*' 'dotnet new vue'

Everything is setup on installation: Webpack, Typescript and VueJS

This Webpack setup does not accept <script lang="ts"></script> and most of the tutorials uses it to import D3.js library.

Is there any way to reconfigure webpack in this template to accept <script lang="ts"></script>?

Error after I install d3 and d3 typings

Best

Is there a reason you can't download D3 (for example, via npm install d3) and import it inside your Typescript code? — Mark
– Mark, Commented Oct 14, 2017 at 1:19

Igor Soloydenko · Accepted Answer · 2017-10-14 08:49:58Z

9

I don't know why would you like to use <script> instead of the typical npm based approach. There are many examples/tutorial in the Internet on that topic. Normally, what you do is a few steps:

Install d3 as npm dependency: npm install --save d3
Since you're writing code in TypeScript, it's helpful to get some type support: npm install --save-dev @types/d3
In your typescript file import the types by adding the next line at the very top of it: import * as d3 from "d3";
Use it. d3.select(...)

edited Oct 14, 2017 at 8:49

answered Oct 14, 2017 at 4:49

Igor Soloydenko

11.9k11 gold badges56 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Richard Matsen Over a year ago

I think the you mean npm install --save d3 instead of npm install --save-dev d3?

Richard Matsen Over a year ago

And probably the types are --save-dev :)

Ksistof Over a year ago

Thank you for your answer. I have installed d3.js and d3.js typings for typescript. However, when I type in d3.select("#chart").append("svg:svg"); everything being underlined in red and compiler gives a lot of errors. I have added image to my original post.

Jonathan Pauw Over a year ago

@Ksistof you can't write it directly in your class. if you wrap it with a function the errors will disappear

Collectives™ on Stack Overflow

D3 + VueJs + Typescript | How to import D3.js Library?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related