javascript - 使用 Angular-cli 的 D3 V4 多线图

Question

我正在使用 D3 图表库通过 Angular-cli 创建图表。 D3 版本为 4.2.2。以下是我正在尝试的。

    import {Directive, ElementRef} from '@angular/core';
    import * as D3 from 'd3';

    @Directive({
      selector: 'bar-graph',
      properties: ['data'],
    })

    export class BarGraphDirective {

      private data:Array<number>;  // raw chart data
      private htmlElement:HTMLElement;

      constructor(elementRef:ElementRef) {
        this.htmlElement = elementRef.nativeElement;  // reference to <bar-graph> element from the main template
        console.log(this.htmlElement);
        console.log(D3);

        let d3:any = D3;

        var data = [{
          "date": "2011-10-01",
          "sales": 110,
          "searches": 172
        }, {
          "date": "2011-10-02",
          "sales": 51,
          "searches": 67
        }, {
          "date": "2011-10-03",
          "sales": 53,
          "searches": 69.4
        }];

        // set the dimensions and margins of the graph
        var margin = {
            top: 20,
            right: 80,
            bottom: 30,
            left: 50
          },
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

        // parse the date / time
        var parseDate = d3.timeParse("%Y-%m-%d");
        console.log(parseDate);

        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

        // define the line
        var line = d3.line().curve(d3.curveBasis)
          .x(function (d) {
            return x(d.date);
          })
          .y(function (d) {
            return y(d.sales);
          });

        var svg = d3.select(this.htmlElement).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 + ")");

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        // format the data
        data.forEach(function (d) {
          d.date = parseDate(d.date);
          d.sales = +d.sales;
        });

        x.domain(d3.extent(data, function (d) {
          return d.date;
        }));

        y.domain([0, d3.max(data, function (d) {
          return d.sales;
        })]);

        // Add the line path.
        svg.append("path")
          .data([data])
          .attr("class", "line")
          .style("fill", "none")
          .attr("d", line)
          .style("stroke", function (d) {
            return color(d.Austin);
          });

        // Add the X Axis
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
          .call(d3.axisLeft(y));
      }
    }

node_modules 文件夹有以下 D3 库。

和system.config.ts

    const map: any = {
      'd3': 'vendor/d3/build'
    };

    /** User packages configuration. */
    const packages: any = {
      'd3':{
        format: 'cjs',
        defaultExtension: 'js',
        main: 'd3.min.js'
      }
    };

angular-cli-build.js

    // Angular-CLI build configuration
    // This file lists all the node_modules files that will be used in a build
    // Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

    /* global require, module */

    var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

    module.exports = function(defaults) {
      return new Angular2App(defaults, {
        vendorNpmFiles: [
          ...
          'd3/**/*.+(js|js.map)'
        ]
      });
    };

然后我的图表如下所示。

图表只显示销售数据，但我需要在图表中同时显示销售和搜索数据。即我只想创建多折线图。

非常感谢任何建议。

谢谢

Answer 1

你不是在画两条线，只是一条线，试试像这样的东西:

    // format the data
    data.forEach(function (d) {
      d.date = parseDate(d.date);
      //d.sales = +d.sales; //<-- you don't really need this, these are already numeric
    });

    x.domain(d3.extent(data, function (d) {
      return d.date;
    }));

    y.domain([0, d3.max(data, function (d) {
      return d.sales > d.searches ? d.sales : d.searches;
    })]);

    // Add the line path.
    svg.append("path")
      .attr("class", "line")
      .style("fill", "none")
      .attr("d", line(data))
      .style("stroke", "orange");
     // d.Austin?  doesn't exist in your data
     //function (d) {
     //   return color(d.Austin); 
     // });

    // change line to look at searches
    line.y(function (d) {
      return y(d.searches);
    });

    // Add the second line path.
    svg.append("path")
      .attr("class", "line")
      .style("fill", "none")
      .attr("d", line(data))
      .style("stroke", "steelblue");