«Кривой» конец графа области d3.js

Question

Я пытаюсь сделать граф области, который соответствует линейному графику (используя идентичные данные) до произвольной горизонтальной точки на графике. Вот как я настроить область графика:

var area = d3.svg.area() 
    .x(function(d,i) { return x(i); }) 
    .y0(each_graph_height) 
    .y1(function(d,i) { 
     if (i <= this_week_number) { 
      return y(d); 
     } else { 
      return each_graph_height; 
     }    
    }); 

Однако правый край области графика «криво». Вот как это выглядит:

Любые идеи, почему, и что я могу сделать, чтобы область графика конец с идеальной вертикальной кромкой?

Answer 1

Вы говорите ему, чтобы использовать точки данных до «this_week_number», и на протяжении всех недель после этого использовать y = 0. Но значения x все еще продолжают увеличиваться, поэтому у вас есть область нулевой ширины, проходящая до конца вашей оси. И у вас все еще есть линия, взятая из текущей точки данных (x, y) на следующей неделе (x, 0).

Чтобы действительно обрезать от области, вам нужно обрезать от значения х, а также значения Y:

var area = d3.svg.area() 
.x(function(d,i) { 
    if (i <= this_week_number) { 
     return x(d); 
    } else { 
     return x(this_week_number); 
    }    
}) 
.y0(each_graph_height) 
.y1(function(d,i) { 
    if (i <= this_week_number) { 
     return y(d); 
    } else { 
     return each_graph_height; 
    }    
}); 

Это должно работать (вы будете только накопление очков все на та же точка на оси), но более элегантное решение было бы использовать defined функцию на самом деле вырезать дополнительные точки данных:

var area = d3.svg.area() 
.x(function(d,i) { return x(i); }) 
.y0(each_graph_height) 
.y1(function(d,i) { return y(d); }) 
.defined(function(d,i){ return i <= this_week_number; }); 

(See this Mike Bostock example for a more conventional use of the defined method)