typescript


typescript line chart d3


I am new to d3 and typescript.
I am trying to create a simple line chart by using d3 v4 and typescript.
However, I got a typescript error as in the following image:
What is the problem?
//appending svg to HTML
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");
//sample data -- initial scale data
var sampleData = [{
"yData": 202,
"xData": 2000
}, {
"yData": 215,
"xData": 2001
}, {
"yData": 179,
"xData": 2002
}, {
"yData": 199,
"xData": 2003
}, {
"yData": 134,
"xData": 2003
}, {
"yData": 176,
"xData": 2010
}];
var initialXmin = d3.min(sampleData, function (d) { return d.xData; });
var initialXMax = d3.max(sampleData, function (d) { return d.xData; });
var initialYmin = d3.min(sampleData, function (d) { return d.yData; });
var initialYMax = d3.max(sampleData, function (d) { return d.yData; });
var linearXScale = d3.scaleLinear()
.domain([initialXmin, initialXMax])
.range([margin.left, width - margin.right]);
var linearYScale = d3.scaleLinear()
.domain([initialYMax, initialYmin])
.range([margin.top, height - margin.bottom]);
var xAxis = d3.axisBottom(linearXScale);
var yAxis = d3.axisRight(linearYScale);
//create x Axis
canvas.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
//create y Axis
canvas.append("g")
.attr("transform", "translate( " + margin.left + " ,0)")
.call(yAxis);
// define the line
var lineGenerator = d3.line()
.x(function (d) {
return this._linearXScale(d['xData']);
//return linearXScale(d["x_value"]);
})
.y(function (d) {
return this._linearXScale(d['yData']);
})
.curve(d3.curveBasis);
//create the line
canvas.append("path")
.attr("d", lineGenerator(sampleData))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');

Related Links

Iterate over items of a specific interface in Typescript
Angular 2 | listen for keypress event on whole page
How do I install typescript definitions for Electron?
Typescript named object destructuring
Typescript Cannot find name 'XInterface'
Angular 2 seed and ambiant import
Extract fields from object to match class in Typescript
Abstract class A cannot instantiate new instances of abstract class B
Annotating a function assigned to a variable in TypeScript and TSLint
Change type imported from typings definition
Socket.io Typescript Custom Arguments
Is it possible to decorate a decorator in Typescript?
Is there an easy way to get sublime text 3 to transpile Typescript?
angular 2 passing parameters through service rather than router parameters
Angular2: No best common type exists among return expressions
Is it possible to use parent provider in child directives in angular 2

Categories

HOME
odoo-10
web-applications
servlets
rtmp
outlook
design
windows-runtime
middleware
robot
box
restsharp
player-swift
clion
eps
stm
session-cookies
cytoscape.js
reload
swig
appcelerator-alloy
accelerated-mobile-page
realm-java
selenium-edgedriver
rrd
ucwa
temp
apscheduler
azure-api-apps
react-redux-form
vue-router
dlopen
complex-networks
chamilo-lms
argparse
partition
solid-principles
linechart
azure-management-api
plasticscm
firedac
syncfusion
spark-submit
invalidate
http-status-code-500
ewsjavaapi
domdocument
jquery-masonry
libev
itertools
angular-directive
tastypie
dr-memory
mit-scheme
codeigniter-upload
balsamiq
rabbitvcs
main-activity
docklight
js-of-ocaml
coldfusion-10
clipping
actioncable
uat
python-dragonfly
interpreted-language
symbian
session-replication
oboe.js
xsb
realm-list
wss4j
simperium
sql-server-ce-3.5
mks
words
jasmin
android-menu
private-methods
iqueryable
team-explorer-everywhere
mouseenter
wmv
sirtrevor
azimuth
disk-io
blueprint
django-endless-pagination
nmea
siblings
libnids
mips64
pubdate
rcu
sparc
couchpotato
argumentexception
neventstore
word-2010
domain-mapping
mixing
timestamp-with-timezone
android-actionbar-compat
google-website-optimizer
harvest
ria
rgba
oledbcommand
adaboost
tipsy
proxy-classes
semantic-zoom
livevalidation
cluetip
alivepdf
time-estimation
net-ssh
clipboard-pictures

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App