角度D3js折线图,x轴上只有一个标签

时间:2019-10-08 14:11:32

标签: angular typescript d3.js

我想要一张图表,其中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…"

0 个答案:

没有答案
相关问题