错误:D3 V4多系列折线图与Angular-cli - <path>attribute d:期望数
Error: D3 V4 Multi-series line chart with Angular-cli - <path> attribute d: Expected number
我使用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); });
任何建议都是非常感谢的。
谢谢你
在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]};
})
};
});
相关文章：
- 正在使用$location.path(.）路由ng视图
- 为什么jasmine期望不验证是否抛出了错误
- gulp Iconify任务抛出错误TypeError:Path必须是字符串.收到false
- paper.js animation along a path
- Facebook:当发布期望对象引用时显示打开的图形对话框
- React+Redux-期望reducer是一个函数
- Animating text along an circular path with svg & javascr
- Raphael Path十字路口不工作
- res.sendFile(path.join(__dirname, '../public', '
- “期望赋值或函数调用，而是看到了表达式.” - 不必要的控制台.log
- 地图(int，int）期望由帖子请求
- Chai 期望 [函数] 抛出一个(错误）未通过测试(使用 Node）
- path没有方法'parse'在Meteor JS中
- Angular JS$location.path(..）未启动路由控制器
- 这是链接chai.js's期望在守夜
- Js提示:“;期望一个赋值或函数调用，而看到一个表达式“;，Switch语句
- $location.path获取上一个路径
- D3未捕获类型错误:path.data不是函数
- Angularjs$location.path(）无法定位到当前路由器
- “错误:& lt; path>属性d:期望数量
