D3 V4 Multi-Liniendiagramm mit Angular-cli

Question

Ich verwende D3 Charting-Bibliothek, um Diagramme mit Angular-CLI zu erstellen. D3-Version ist 4.2.2. Folgendes ist, was ich versuche.

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 Ordner unter D3 Bibliotheken hat.

Und 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' 
     } 
    }; 

Winkel-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)' 
     ] 
     }); 
    }; 

Dann sieht mein Diagramm als unten.

Die Grafik zeigt nur Umsatzdaten, aber ich brauche sowohl Umsatz als auch Suchdaten in der Tabelle anzuzeigen. ich möchte nur ein mehrzeiliges Diagramm erstellen.

Alle Vorschläge werden sehr geschätzt.

Danke

Answer 1

Sie sind nicht zwei Linien zeichnen, nur ein, versuchen Sie so etwas wie:

// 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");