我是svg和d3js的新手,并且正在关注https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-starting-with-a-basic-graph上的教程
$('#to').on('change',function() {
var endDate = new Date(Date.parse( $('#to').val()
));
var width= 1024;
var height= 500;
var margin = {top:20, right:20, top:20, bottom:20};
var parseDate = d3.time.format("%x %H").parse;
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(30);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(30);
var valueline = d3.svg.line()
.x(function(d) { return x(d.timestamp); })
.y(function(d) { return y(d.phaseOne); return y(d.phaseTwo); return y(d.phaseThree);});
var svg = d3.select("#graph")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
d3.json('<?php echo base_url(); ?>uploads/<?php echo $username; ?>.json',function(error,data){
data.forEach(function(d){
d.timestamp = parseDate(d.timestamp);
d.pday_chan1 = +d.day_chan1;
d.d.day_chan2 = +d.day_chan2;
d.d.day_chan3 = +d.day_chan3;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.day_chan1; })]);
y.domain([0, d3.max(data, function(d) { return d.day_chan2; })]);
y.domain([0, d3.max(data, function(d) { return d.day_chan3; })]);
svg.append("path")
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
});
});
我试图生成三行,而不是生成一行。代码没有显示任何错误,我对应该从哪里开始调试感到困惑。任何指针将不胜感激。