Проблема с гистограммой d3.js

Question

У меня более 100 точек данных на оси х, изначально я показываю только 20 точек, все точки данных загружены, но отображаются только первые 20 точек, остальные точки данных изначально скрыты и отображаются при перетаскивании панели насправа. Я хочу показать последнюю точку или элемент массива данных на 20-й позиции гистограммы на оси x изначально. В данный момент последняя точка данных отсутствует на рисунке. Я хочу отобразить последнюю точку данных на 20-й позиции x-axis.

вот ссылка на скрипку. По сути, я хочу показать последний элемент массива данных, указанный в скриптовой ссылке JS, т. Е. Октябрь 2007 года, на 20-й позиции оси x изначально. https://jsfiddle.net/60nLzdc2/1/

var data = [
    {CML_ID: 0, Id: "0D", date: "16:009/9", CML_VALUE: 1810, $$hashKey: "object:180"},
    {CML_ID: 1, Id: "1D", date: "17:009/9", CML_VALUE: 1749, $$hashKey: "object:181"},
    {CML_ID: 2, Id: "2D", date: "18:009/9", CML_VALUE: 1572, $$hashKey: "object:182"},
    {CML_ID: 3, Id: "3D", date: "19:009/9", CML_VALUE: 1267, $$hashKey: "object:183"},{CML_ID: 4, Id: "4D", date: "20:009/9", CML_VALUE: 989, $$hashKey: "object:184"},
    {CML_ID: 5, Id: "5D", date: "21:009/9", CML_VALUE: 824, $$hashKey: "object:185"},
    {CML_ID: 6, Id: "6D", date: "22:009/9", CML_VALUE: 727, $$hashKey: "object:186"},......
]

это массив данных

`