Vẽ đường sử dụng các giá trị y tương tự, lô dòng ở dưới cùng

Question

Tôi có cùng một câu hỏi với it

Khi sử dụng cùng giá trị trong yAxis, dòng lô ở dưới cùng

đây là mã của tôi :

 

    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); 

Khi được gọi

draw(data)

thì đúng.

svg là:

Và gọi

draw(data1) //the y values is the same

trong svg, lô dòng ở phía dưới, nhưng nếu không có lỗi, nó phải là ở phía trên.

svg là:

Bất cứ ý tưởng gì đang xảy ra sai ở đây những gì tôi có thể làm một cái gì đó làm cho dòng lô ở đầu? Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Vấn đề là bạn đang đặt miền đầu vào của phạm vi sử dụng d3.extent. Nếu tất cả các giá trị đều giống nhau, mọi thứ sẽ ánh xạ tới tọa độ 0 y. Để bắt đầu quy mô y 0, thay thế

y.domain(d3.extent(data, function (d) { 
     return d.roundTripTime; 
    })); 

với

y.domain([0, d3.max(data, function (d) { 
     return d.roundTripTime; 
    })]);