如何更正 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>

我的酒窝图表代码是：

  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 轴的顺序是正确的...从 1 月到 12 月，看起来如下...

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

我的问题：为什么当我有这几个月的多个数据条目时会发生这种情况，更正它的最佳方法是什么，以便 1 月和 4 月以相同的方式排序它们在第一个图表中（一月、二月、三月、四月、五月等）？

Answer 1

原因是您指定了这个排序规则：

x.addOrderRule("Date");

但是 X 轴值 "January" 和 "April" 有两个不同的日期与之关联。

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

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

这还有利于确保所有月份都显示在轴上，即使该月份没有数据也是如此。

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

如何更正 D3 Dimple Category Axis 的顺序？

How do I correct the ordering of D3 Dimple Category Axis?

javascript

linechart

timeserieschart

d3.js

dimple.js