javascript - 如何更正 D3 凹坑类别轴的顺序？

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>

我的酒窝图表代码是:

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

当我以原始形式使用数据时，注释掉第二个和第四个对象，X 轴的顺序正确......从一月到十二月，如下所示......

但是，如果我取消注释第二个和第四个对象并运行相同的代码，您会注意到，虽然 Y 幅度值是正确的(它们被求和)，但一月和四月被移动到 X 的末尾轴，如下...

我的问题:当我有这些月份的多个数据条目时，为什么会发生这种情况？纠正它的最佳方法是什么，以便一月和四月的排序方式与第一个相同图表(一月、二月、三月、四月、五月等)？

Answer 1

原因是您指定了以下排序规则:

x.addOrderRule("Date");

但是 X 轴值“一月”和“四月”有两个不同的与之关联的日期。

相反，由于我们只讨论几个月，您可以将顺序硬编码为几个月:

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

这还有一个好处，即即使该月没有数据，也可以确保所有月份都显示在轴上。

警告:我没有测试过这个，甚至之前没有使用过 Dimple，但是他们的 documentation描述了这一点。