D3 V4與Angular-cli

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)); 
     } 
    } 

然後我的圖表如下圖所示。

的問題是X軸& Y軸名丟失，X軸標籤（日期）的格式不正確。

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

角-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

進行格式化x軸蜱：

svg.append("g") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m-%d"))); 

添加標籤：

svg.append("text") 
      .attr("text-anchor", "middle") 
      .attr("transform", "translate("+ (-margin.left/2) +","+(height/2)+")rotate(-90)") 
      .text("Sales"); 

    svg.append("text") 
      .attr("text-anchor", "middle") 
      .attr("transform", "translate("+ (width/2) +","+(height+(margin.bottom))+")") 
      .text("Date");