I'm trying to make a basic line chart using a 1 dimensional array containing numeric elements.
chart.html
<svg id="svg"></svg>
graph.js
lineData = [10,15,20,25,30,35,40,35,30,25,20,15,10];
let svg = D3.select("#svg").attr('width', width).attr('height', height);
let chart = svg.append('g').classed('display', true).attr('transform', 'translate(' + this.padding.l + ', ' + this.padding.t + ')');
let x = D3.scaleLinear().domain([0, lineData.length]).range([0,width]);
let y = D3.scaleLinear().domain([0, D3.max(lineData)]).range([height, 0]);
let line = D3.line().x((d,i) => {return x(i);}).y((d) => {return y(d);}).curve();
chart.selectAll('.line').data([lineData]).enter().append('path').classed('line', true).attr('stroke', 'red').attr('d', (d) => {return line(d);});
and I keep getting this error: Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "[object Object]".
----------UPDATE (Un-simplified Angular Component)----------
bar-curve-chart.component.ts
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import * as D3 from "d3";
import * as D3Tooltip from "d3-tip"
@Component({
selector: 'app-bar-curve-chart',
templateUrl: './bar-curve-chart.component.html',
styleUrls: ['./bar-curve-chart.component.css']
})
export class BarCurveChartComponent implements OnInit {
@ViewChild('svg') svg:any;
private chart:any;
private padding = {t:50, r:75, b:25, l:20};
private x:any;
private y:any;
// Change Any to Data Type
@Input('data') data:number[] = [5,10,15,20,25,30,35,30,25,20,15,10,5];
@Input('lineData') lineData:any = [10,15,20,25,30,35,40,35,30,25,20,15,10];
@Input('height') height:number = 700;
@Input('width') width:number = 700;
constructor() { }
ngOnInit() {
this.prep();
this._plot();
}
private prep():void {
let svg = D3.select(this.svg.nativeElement)
.attr('width', this.width)
.attr('height', this.height);
this.chart = svg.append('g')
.classed('display', true)
.attr('transform', 'translate(' + this.padding.l + ', ' + this.padding.t + ')');
this.x = D3.scaleLinear().domain([0, this.data.length]).range([0, this.width]);
this.y = D3.scaleLinear().domain([0, D3.max(this.data)]).range([this.height, 0]);
}
private _plot():void {
let line = D3.line()
.x((d,i) => {return this.x(i);})
.y((d) => {return this.y(d);}).curve();
console.log(line(this.lineData));
this.chart.selectAll('.line')
.data([this.lineData])
.enter()
.append('path')
.classed('line', true)
.attr('stroke', 'red')
.attr('d', (d) => {return line(d);});
}
}
bar-curve-chart.component.html
<svg #svg ></svg>
You have an error in your definition of the line generator:
let line = D3.line()
.x((d,i) => {return this.x(i);})
.y((d) => {return this.y(d);}).curve();
If you use .curve()
without an argument, it acts as a getter:
If curve is not specified, returns the current curve factory, which defaults to curveLinear.
Therefore, line
is going to hold a reference to the curve factory instead of the line generator. If you want a curve factory other than the default d3.curveLinear, you need to pass it as a parameter, or you need to omit the call to .curve()
to get the line generator instead.
As an aside: the above statement can be simplified/beautified to:
let line = D3.line()
.x((d, i) => this.x(i))
.y(this.y);
In my case, I did not have same problem as OP, but I had same error message as OP. The OP was not passing an argument to curve(...)
, but I was not calling d3.line
as I should!
I was only calling d3.curveCatmullRom.alpha(0.5)
:
path.attr('d', d3.curveCatmullRomClosed.alpha(0.5))
Once I called d3.line().curve(...), as described in the documentation, it worked:
path.attr('d', d3.line().curve(d3.curveCatmullRom.alpha(0.5));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With