我想要一张图表,其中y轴基于值是动态的 但x轴仅包含与y轴相对应的标签,而不必是类似以下的值:
data= [{label:'AAA', value:50},{label:'BBB', value:60},{label:'CCC', value:70}]
export class LineModel{
value:number;
label:string;
}
draw(){
this.chartProps = {};
let dataset: LineModel[] = this.data;
let total = dataset.reduce(function(prev, current) {
return (prev.value > current.value) ? prev : current
}) //returns object
// Set the dimensions of the canvas / graph
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Set the ranges
this.chartProps.x = d3.scaleTime().range([0, width]);
this.chartProps.y = d3.scaleLinear().range([height, 0]);
// Define the axes
var xAxis = d3.axisBottom(this.chartProps.x);
var yAxis = d3.axisLeft(this.chartProps.y).ticks(5);
let _this = this;
// Define the line
var valueline = d3.line<LineModel>()
.x(function (d:LineModel) {
if (d.label) {
return _this.chartProps.x(d.label);
}
})
.y(function (d) { console.log('Close market'); return _this.chartProps.y(d.value); });
var svg = d3.select(this.chartElement.nativeElement)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
this.chartProps.y.domain([0, total.value]);
// Add the valueline path.
svg.append('path')
.attr('class', 'line line1')
.style('stroke', 'black')
.style('fill', 'none')
.attr('d', valueline(dataset));
// Add the X Axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0,${height})`)
.call(xAxis);
// Add the Y Axis
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
// Setting the required objects in chartProps so they could be used to update the chart
this.chartProps.svg = svg;
this.chartProps.valueline = valueline;
this.chartProps.xAxis = xAxis;
this.chartProps.yAxis = yAxis;
}
像这样,它在抱怨:
attr.js:17 Error: <path> attribute d: Expected number, "MNaN,60LNaN,30LNa…"