d3.nest() 不是函数答案

【问题标题】：d3.nest() not a functiond3.nest() 不是函数
【发布时间】：2018-11-19 07:58:12
【问题描述】：

我在 Angular 中使用 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));

}}

【问题讨论】：

标签： javascript angular d3.js

【解决方案1】：

我建议您只导入您需要的内容，因此请尽量缩小您的产品规模

import {nest} from 'd3-collection';

.... later on use directly

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

【讨论】：

【解决方案2】：

看起来您缺少定义 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' 覆盖了它

【讨论】：

是的，在我在 package.json 中安装了一些包后它起作用了，d3-collection 就是其中之一。

【解决方案3】：

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

“看来D3 6.x版本已经将nest()方法替换为group()了。更新依赖nest的代码使用新方法。”

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

【讨论】：