d3.nest() 不是函數

Question

我在角度使用 d3 v4，下面是我的 d3graphcomponent.ts 文件。 如果我在 python 本地服務器上運行它，它工作正常，但是一旦我以角度運行它，它顯示嵌套不是一個函數

我的 index.html 中也有<script src="https://d3js.org/d3.v4.min.js"></script> 。

請評論有關所需文件和包的更多信息。

d3graphcomponent.ts

import { Component, OnInit, Input } from '@angular/core';

import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';



@Component({
  selector: 'app-d3graph',
  template: `
    <h2>{{subtitle}}</h2>
    <svg width="900" height="500"></svg>
  `
})
export class D3graphComponent implements OnInit {
  @Input()  storeIntraffic: string;
  @Input() dateForD3: string;
  @Input() peopleInSumStr: string;
  // storeIntraffic:any= [
  // {date: new Date("2010-01-01"), value: 210.73},
  // {date: new Date("2010-01-04"), value: 214.01},
  // {date: new Date("2010-01-05"), value: 214.38},
  // {date: new Date("2010-01-06"), value: 210.97},
  // {date: new Date("2010-01-07"), value: 10.58},
  // {date: new Date("2010-01-08"), value: 211.98}];

  title: string = 'D3.js with Angular 6!';
  subtitle: string = 'Line Chart';
  peopleInSumArr: any[];
  private margin = {top: 20, right: 20, bottom: 30, left: 50};
  private width: number;
  private legendSpace: number;
  private height: number;
  private x: any;
  private y: any;
  private svg: any;
  private line: d3Shape.Line<[number, number]>;
  d3Data: any;
  data:any;
  dashboard_date:any;
  constructor() {
    this.width = 900 - this.margin.left - this.margin.right;
    this.height = 500 - this.margin.top - this.margin.bottom;

  }

  ngOnInit() { }
  ngAfterViewChecked() {
    if (this.storeIntraffic !== undefined && typeof this.storeIntraffic === 'string') {
      this.d3Data = JSON.parse(this.storeIntraffic);

      this.dashboard_date = this.dateForD3;   
      console.log("value ",);

      console.log('d3 this.peopleInSumArr', this.peopleInSumStr);
      this.peopleInSumArr = JSON.parse(this.peopleInSumStr);
      console.log('d3 this.peopleInSumArr jajdjhdhjd', this.peopleInSumArr);
      console.log('this.dateForD3', this.dateForD3);
      this.drawgraph();
      //this.initSvg();
      //this.initAxis();
      //this.drawAxis();
      //this.drawLine();
    }
  }
  private drawgraph()
  {

  // Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 70, left: 50},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
//var parseDate = d3.timeParse("%b %Y");

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

// Define the line
var priceline = d3Shape.line()  
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.peoplesum); });

// Adds the svg canvas
var svg = d3.select("body")
    .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 + ")");

// Get the data
    this.data = JSON.parse(this.peopleInSumStr);
    var mindate = new Date(2016,12,1),
            maxdate = new Date(2017,4,4);
    x.domain(d3Array.extent([mindate, maxdate]));
    // Scale the range of the data

    y.domain(d3Array.extent(this.data, (d) => d.value ));

    // Nest the entries by symbol
    console.log(typeof this.data[0])
    var dataNest = d3.nest()
        .key(function(d) {return d.storeid;})
        .entries(this.data);


    // set the colour scale
    var color = svg.scaleOrdinal(svg.schemeCategory10);

    this.legendSpace = width/dataNest.length; // spacing for the legend

    // Loop through each symbol / key
    dataNest.forEach(function(d,i) { 

        svg.append("path")
            .attr("class", "line")
            .style("stroke", function() { // Add the colours dynamically
                return d.color = color(d.key); })
            .attr("d", priceline(d.values));

        // Add the Legend
        svg.append("text")
            .attr("x", (this.legendSpace/2)+i*this.legendSpace)  // space legend
            .attr("y", height + (margin.bottom/2)+ 5)
            .attr("class", "legend")    // style the legend
            .style("fill", function() { // Add the colours dynamically
                return d.color = color(d.key); })
            .text(d.key); 

    });

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

  // Add the Y Axis
  svg.append("g")
      .attr("class", "axis")
      .call(svg.axisLeft(y));

}}

Answer 1

我建議只導入你需要的東西，所以盡量縮小你的生產規模

import {nest} from 'd3-collection';

.... later on use directly

var dataNest = nest()
        .key(function(d) {return d.storeid;})
        .entries(this.data);

Answer 2

引用來源： https ://github.com/GeriLife/wellbeing/issues/562

“似乎 D3 版本 6.x 已經用 group() 替換了 nest() 方法。更新依賴於 nest 的代碼以使用新方法。”

https://github.com/d3/d3-array/blob/master/README.md#group

Answer 3

看起來您缺少定義nest的d3-collection 。

import * as d3Collection from 'd3-collection';

並將其稱為：

d3Collection.nest();

我的 index.html 中也有<script src="https://d3js.org/d3.v4.min.js"></script>

但是你已經用import * as d3 from 'd3-selection'覆蓋了它

Answer 4

如果要將nest替換為group方法，則需要對其進行一些修改。 我的項目如下所示：

Array.from(d3
      .group(rawData, d => d.year)) // replace original nest method with d3.group with rawData as first parameter and callback as second that called by d3.nest().key method. And convert it to array by Array.from method so that it has map method called next step.
      // .key(d => d.year)
      // .entries(rawData)
      .map(d => { // replace previous rollup method
        // d[1] as object to replace d directly
        const pairs = d[1].map(v => [v.salaryInflated, v[stat]]);
        ...
        // d[0] as key and d[1] as values those maybe the object structure by nest() 
        return {
          key: d[0],
          values: d[1],
          ...
        };
      })