我正在使用教程中的以下代码创建一个带有React的d3折线图。
它一直给我以下错误:
react.min.js:12错误:属性d:预期的数字," MNaN,NaNLNaN,NaNC ......"。
我用D3创建的parseDate函数为day属性返回NaN。我在做什么呢?这是代码:
var LineChart = React.createClass({
//define the width, height and chartId as proptypes
propTypes: {
width:React.PropTypes.number,
height:React.PropTypes.number,
chartId:React.PropTypes.string
},
//set default props
getDefaultProps: function() {
return {
width: 800,
height: 300,
chartId: 'v1_chart'
};
},
//set width as this.state.width for 2-way binding to create responsive chart
getInitialState:function(){
return {
width:this.props.width
};
},
render: function(){
//dummy data
const data=[
{day:'02-11-2016',count:180},
{day:'02-12-2016',count:250},
{day:'02-13-2016',count:150},
{day:'02-14-2016',count:496},
{day:'02-15-2016',count:140},
{day:'02-16-2016',count:380},
{day:'02-17-2016',count:100},
{day:'02-18-2016',count:150}
];
//dimensions and position of the chart inside SVG container
const margin = {top:5, right:50, bottom:20, left:50};
//ww is set dynamically using this.state.width for responsive charts
const w = this.state.width - (margin.left + margin.right);
const h = this.props.height - (margin.top + margin.bottom);
//use d3 to parse the dates
const parseDate = d3.timeFormat("%m-%d-%y");
data.forEach(d=>{
d.date = parseDate(d.day);
});
//create scales
const x = d3.scaleTime()
.domain(d3.extent(data, function (d) {
return d.date;
}))
.rangeRound([0, w]);
const y = d3.scaleLinear()
.domain([0,d3.max(data,function(d){
return d.count+100;
})])
.range([h, 0]);
//generate line using scales
const line = d3.line()
.x(d=>{
x(d.date);
})
.y(d=>{
y(d.count);
}).curve(d3.curveBasis);
//transform the chart position
const transform = 'translate(' + margin.left + ',' + margin.top + ')';
//render the line chart
return (
<div>
<svg id={this.props.chartId} width={this.state.width} height={this.props.height}>
<g transform={transform}>
<path className="line shadow" d={line(data)} strokeLinecap="round"/>
</g>
</svg>
</div>
);
}
});
答案 0 :(得分:3)
尝试使用timeParse
而不是timeFormat
:
var day = "02-01-2015";
var parseDate = d3.timeParse("%m-%d-%Y");
console.log(parseDate(day));
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
&#13;
另请注意,小写y
表示没有世纪指示符的年份,而大写Y
表示带有世纪的年份。
另外,如果使用带箭头功能的{}括号,请尝试在行生成器中向箭头函数添加return
语句。否则完全删除括号(当跳过括号时,返回是隐式的):
var h = 300;
var w = 500;
var svg = d3.select('body')
.append('svg')
.attr('width',w)
.attr('height',h);
var data=[
{day:'02-11-2016',count:180},
{day:'02-12-2016',count:250},
{day:'02-13-2016',count:150},
{day:'02-14-2016',count:496},
{day:'02-15-2016',count:140},
{day:'02-16-2016',count:380},
{day:'02-17-2016',count:100},
{day:'02-18-2016',count:150}
];
var parseDate = d3.timeParse("%m-%d-%Y");
data.forEach(d=>{
d.date = parseDate(d.day);
});
//create scales
var x = d3.scaleTime()
.domain(d3.extent(data, function (d) {
return d.date;
}))
.rangeRound([0, w]);
var y = d3.scaleLinear()
.domain([0,d3.max(data,function(d){
return d.count+100;
})])
.range([h, 0]);
//generate line using scales
const line = d3.line()
.x( d=>x(d.date) )
.y( d=>y(d.count) )
.curve(d3.curveBasis);
svg.append('path')
.datum(data)
.attr('d',line);
&#13;
path {
stroke: black;
fill:none;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
&#13;