Как исправить порядок D3 Dimple Category Axis?

Question

У меня есть оригинальный набор данных, который выглядит следующим образом ...

var dataSet3 = [ 
    { "Month": "January", "Date": "20150101", "Unit Sales": "3000", "Revenue": "2000" }, 
    //{ "Month": "January", "Date": "20150103", "Unit Sales": "3000", "Revenue": "2000" }, 
    { "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" }, 
    //{ "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" }, 
    { "Month": "May", "Date": "20150530", "Unit Sales": "3000", "Revenue": "2000" }, 
    { "Month": "June", "Date": "20150620", "Unit Sales": "1500", "Revenue": "39000" }, 
    { "Month": "July", "Date": "20150706", "Unit Sales": "2500", "Revenue": "6000" }, 
    { "Month": "February", "Date": "20150205", "Unit Sales": "2500", "Revenue": "5000" }, 
    { "Month": "March", "Date": "20150307", "Unit Sales": "1500", "Revenue": "6000" }, 
    { "Month": "August", "Date": "20150816", "Unit Sales": "2500", "Revenue": "20000" }, 
    { "Month": "September", "Date": "20150907", "Unit Sales": "1500", "Revenue": "6000" }, 
    { "Month": "October", "Date": "20151009", "Unit Sales": "500", "Revenue": "9000" }, 
    { "Month": "November", "Date": "20151120", "Unit Sales": "50", "Revenue": "15000" }, 
    { "Month": "December", "Date": "20151222", "Unit Sales": "2000", "Revenue": "7000" } 
    ]; 

Мой HTML выглядит следующим образом ...

<div class="div_RootBody" id="root_div"> 
    <h3>Example 4</h3> 
    <div id="chart4"></div> 
</div> 

Мой Dimple код картирование является:

function draw2(selectString, data){ 

    //var svg2 = dimple.newSvg("#chart2", 690, 420); // width x height 
    var svg2 = dimple.newSvg(selectString, 690, 420); // width x height 
    var myChart = new dimple.chart(svg2); 
    myChart.setBounds(60, 30, 505, 305); 
    var x = myChart.addCategoryAxis("x", "Month"); 
    x.addOrderRule("Date"); 

    var y1 = myChart.addMeasureAxis("y", "Unit Sales"); 
    var y2 = myChart.addMeasureAxis("y", "Revenue"); 

    var line1 = myChart.addSeries("Sales", dimple.plot.line, [x,y1]); 
    var line2 = myChart.addSeries("Gross Revenue", dimple.plot.line, [x,y2]); 

    //line1.data = dataSet1; 
    line1.data = data; 
    line1.plot=dimple.plot.line; 
    //line2.data = dataSet1; 
    line2.data = data; 
    line2.plot=dimple.plot.line; 

    // Assign specific colors to lines 
    myChart.assignColor("Sales", "blue"); 
    myChart.assignColor("Gross Revenue", "green"); 
    line1.lineMarkers = true; 
    line2.lineMarkers = true; 

    myChart.addLegend(180, 10, 260, 20, "right", line1); 
    myChart.addLegend(180, 10, 360, 20, "right", line2); 

    myChart.draw(); 

    }; 

И, я называю код диаграммы Dimple, используя линию ...

draw2("#chart4", dataSet3); 

Когда я использую данные в своем первоначальном виде, с 2-го и 4-го объектов закомментированными, ось X правильно ... с января по приказано декабря и выглядит следующим образом ...

Однако, если я раскомментирую 2-й и 4-й объекты и запустил один и тот же код, вы заметите, что, когда значения величины Y правильны (они суммируются), месяцы января и апреля перемещаются в конец оси X , следующим образом:

Мой вопрос: Почему это происходит, когда у меня есть несколько записей данных за эти месяцы и что является лучшим способом исправить его, так что январь и апрель упорядочены так же, как и на первом графике (январь, февраль, Март, апрель, май и т. Д.)?

Answer 1

Причина заключается в том, что вы определили это правило упорядочения:

x.addOrderRule("Date"); 

но значения X-ось «Январь» и «Апрель» имеют две разные даты, связанные с ними.

Вместо этого, так как это только месяцы мы говорим, вы могли бы жестко закодировать заказ до нескольких месяцев:

x.addOrderRule(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]); 

Это также будет иметь преимущество обеспечения того, чтобы все месяцы появляются на оси, даже если нет данных за этот месяц.

Предостережение: Я не проверял это или даже использовал Dimple раньше, но их описание documentation.