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

您似乎缺少定义#!/bin/bash cd .. virtualenv -p python3 --no-site-packages venv cd script sh updateEnv.sh的{{3}}。

#!/bin/bash
cd ..
echo "activating env"
. venv/bin/activate
pip install --upgrade -r requirements/requirements.txt

并将其称为：

nest

我的index.html中也有import * as d3Collection from 'd3-collection';

但你用d3Collection.nest();

覆盖了那个

d3.nest（）不是一个功能

2 个答案: