Ошибка: D3 V4 Многострочная линейная диаграмма с Angular-cli - <path> атрибут d: Ожидаемый номер

Question

Я использую D8-карту для создания диаграмм с 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 
    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]}; 
      }) 
     }; 
    });