错误：D3 V4带有Angular-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中，日期不会被解析，因为在创建lookBookData之后调用'format the data'块，只需更改序列：

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