错误：D3 V4 具有角度 cli 的多系列折线图 - <path> 属性 d：预期数量

Question

我使用D3图表库与Angular-cli创建图表。D3版本为4.2.2。我试着创建一个多折线图，下面是我正在尝试的。

import {Directive, ElementRef, HostListener, Renderer} from '@angular/core';
import * as D3 from 'd3';
@Directive({
  selector: 'line-graph'
})
export class LineGraphDirective {
  private htmlElement:HTMLElement;
  constructor(private elementRef:ElementRef, private renderer:Renderer) {
    this.htmlElement = this.elementRef.nativeElement;  // reference to <line-graph> element from the main template
    console.log(this.htmlElement);
    console.log(D3);
    let d3:any = D3;
    var data = [{
      "date": "2016-10-01",
      "sales": 110,
      "searches": 67
    }, ...];
    // 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;
    var svg = d3.select(this.htmlElement).append("svg")
      .attr("class", "bar-graph")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    console.log(svg)
    // parse the date / time
    var parseDate = d3.timeParse("%Y-%m-%d");
    // var formatTime = d3.timeFormat("%e %B");
    // set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
    var z = d3.scaleOrdinal(d3.schemeCategory10);
    // define the line
    var line = d3.line().curve(d3.curveBasis)
      .x(function (d) {
        return x(d.date);
      })
      .y(function (d) {
        return y(d.lookbookcount);
      });
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    color.domain(d3.keys(data[0]).filter(function (key) {
      return key !== "date";
    }));
    var lookBookData = color.domain().map(function (name) {
      return {
        name: name,
        values: data.map(function (d) {
          return {date: d.date, lookbookcount: d[name]};
        })
      };
    });
    console.log(lookBookData);
    // format the data
    data.forEach(function (d) {
      d.date = parseDate(d.date);
    });
    x.domain(d3.extent(data, function (d) {
      console.log(d)
      return d.date;
    }));
    y.domain([
      d3.min(lookBookData, function(c) { return d3.min(c.values, function(d) { console.log(d);return d.lookbookcount; }); }),
      d3.max(lookBookData, function(c) { return d3.max(c.values, function(d) { return d.lookbookcount; }); })
    ]);
    z.domain(lookBookData.map(function(c) { return c.name; }));
    // Add the X Axis
    svg.append("g")
      .style("font", "14px open-sans")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%d/%m")));
    // Add the Y Axis
    svg.append("g")
      .style("font", "14px open-sans")
      .call(d3.axisLeft(y));
    // Add Axis labels
    svg.append("text")
      .style("font", "14px open-sans")
      .attr("text-anchor", "end")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .text("Sales / Searches");
    svg.append("text")
      .style("font", "14px open-sans")
      .attr("text-anchor", "end")
      // .attr("x", 6)
      .attr("dx", ".71em")
      .attr("transform", "translate(" + width + "," + (height + (margin.bottom)) + ")")
      .text("Departure Date");
    var chartdata = svg.selectAll(".chartdata")
      .data(lookBookData)
      .enter().append("g")
      .attr("class", "chartdata");
    console.log(chartdata);
    chartdata.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return z(d.name); });
    chartdata.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.lookbookcount) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "14px open-sans")
      .text(function(d) { return d.name; });
  }
}

然后我在浏览器控制台出现错误。

d3.min.js:4Error: <path> attribute d: Expected number, "MNaN,112.5LNaN,10…".(anonymous function) @ d3.min.js:4Fu @ d3.min.js:4Vu @ d3.min.js:4LineGraphDirective @ line-graph.directive.ts:199_View_ChartComponent0.createInternal @ ChartComponent.template.js:27AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent0.createInternal @ AppComponent.template.js:23AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent_Host0.createInternal @ AppComponent.template.js:18AppView.create @ view.ts:113DebugAppView.create @ view.ts:337ComponentFactory.create @ component_factory.ts:111(anonymous function) @ application_ref.ts:431(anonymous function) @ application_ref.ts:407ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:104NgZone.run @ ng_zone.ts:219ApplicationRef_.run @ application_ref.ts:405ApplicationRef_.bootstrap @ application_ref.ts:429(anonymous function) @ application_ref.ts:169ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
d3.min.js:4Error: <path> attribute d: Expected number, "MNaN,342.85714285…".(anonymous function) @ d3.min.js:4Fu @ d3.min.js:4Vu @ d3.min.js:4LineGraphDirective @ line-graph.directive.ts:199_View_ChartComponent0.createInternal @ ChartComponent.template.js:27AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent0.createInternal @ AppComponent.template.js:23AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent_Host0.createInternal @ AppComponent.template.js:18AppView.create @ view.ts:113DebugAppView.create @ view.ts:337ComponentFactory.create @ component_factory.ts:111(anonymous function) @ application_ref.ts:431(anonymous function) @ application_ref.ts:407ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:104NgZone.run @ ng_zone.ts:219ApplicationRef_.run @ application_ref.ts:405ApplicationRef_.bootstrap @ application_ref.ts:429(anonymous function) @ application_ref.ts:169ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
d3.min.js:4Error: <text> attribute transform: Expected number, "translate(NaN,112.5)".(anonymous function) @ d3.min.js:4Fu @ d3.min.js:4Vu @ d3.min.js:4LineGraphDirective @ line-graph.directive.ts:204_View_ChartComponent0.createInternal @ ChartComponent.template.js:27AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent0.createInternal @ AppComponent.template.js:23AppView.create @ view.ts:113DebugAppView.create @ view.ts:337_View_AppComponent_Host0.createInternal @ AppComponent.template.js:18AppView.create @ view.ts:113DebugAppView.create @ view.ts:337ComponentFactory.create @ component_factory.ts:111(anonymous function) @ application_ref.ts:431(anonymous function) @ application_ref.ts:407ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ ng_zone_impl.ts:104NgZone.run @ ng_zone.ts:219ApplicationRef_.run @ application_ref.ts:405ApplicationRef_.bootstrap @ application_ref.ts:429(anonymous function) @ application_ref.ts:169ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
d3.min.js:4Error: <text> attribute transform: Expected number, "translate(NaN,342.85714285…".

显示以下高亮(*)行出错

chartdata.append("path")
.attr("class", "line")
**.attr("d", function(d) { return line(d.values); })**
.style("stroke", function(d) { return z(d.name); });

任何建议都是非常感谢的。

谢谢你

Answer 1

在lookBookData中，日期不被解析，因为'format the data'块在创建lookBookData后被调用，只需改变顺序:

// format the data
    data.forEach(function (d) {
        d.date = parseDate(d.date);
    });
    var lookBookData = color.domain().map(function (name) {
        return {
            name: name,
            values: data.map(function (d) {
                return {date: d.date, lookbookcount: d[name]};
            })
        };
    });