Draw the line use the same y values, plots line at the bottom
d3.js, javascript
Solution
The problem is that you're setting the input domain of your ranges using `d3.extent`. If all the values are the same, everything is going to map to a 0 y coordinate. To start the y scale at 0, replace
y.domain(d3.extent(data, function (d) {
return d.roundTripTime;
}));
with
y.domain([0, d3.max(data, function (d) {
return d.roundTripTime;
})]);
Problem
I have the same question with it When use the same value in `yAxis` ，the plots line at the bottom This is my code: ``` var data = [ { creat_time: "2013-03-19 10:28:30", roundTripTime: "32" }, { creat_time: "2013-03-19 09:07:12", roundTripTime: "45" }, { creat_time: "2013-03-19 08:57:09", roundTripTime: "26" }, { creat_time: "2013-03-19 08:47:10", roundTripTime: "90" }, { creat_time: "2013-03-19 08:37:12", roundTripTime: "80" }, { creat_time: "2013-03-19 08:27:08", roundTripTime: "36" } ]; var data1 = [ { creat_time: "2013-03-19 10:28:30", roundTripTime: "100" }, { creat_time: "2013-03-19 09:07:12", roundTripTime: "100" }, { creat_time: "2013-03-19 08:57:09", roundTripTime: "100" }, { creat_time: "2013-03-19 08:47:10", roundTripTime: "100" }, { creat_time: "2013-03-19 08:37:12", roundTripTime: "100" }, { creat_time: "2013-03-19 08:27:08", roundTripTime: "100" } ]; function draw(data) { var margin = { top: 20, right: 20, bottom: 30, left: 50 }; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg .axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%H:%M")); var yAxis = d3.svg .axis() .scale(y) .orient("left"); var line = d3.svg .line() .x(function(d) { return x(d.creat_time); }) .y(function(d) { return y(d.roundTripTime); }); var svg = d3 .select("body") .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 + ")"); data.forEach(function(d) { d.creat_time = parseDate(d.creat_time); d.roundTripTime = +d.roundTripTime; }); data = sortByReturnTime(data); x.domain( d3.extent(data, function(d) { return d.creat_time; }) ); y.domain( d3.extent(data, function(d) { return d.roundTripTime; }) ); svg .append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg .append("g") .attr("class", "y axis") .call(yAxis); svg .append("path") .datum(data) .attr("class", "line") .attr("d", line); } draw(data); ``` When called ``` draw(data) ``` it's right. the SVG is: And called ``` draw(data1) //the y values is the same ``` in the SVG ,plots line at the bottom ,but if there are not errors, it should be at top. the SVG is: Any idea what is going wrong here? what can I do something make the plots line at the top? Any help is appreciated.