Firefox和IE显示绘图折线图有很大差异

Question

使用相同的网址，我在Firefox和IE之间显示了一个显着的图线图形。

左侧是Firefox（第28版），右侧是IE（第11版）。

怎么样？

以下是来源：

<div class="row">
    <div id="gaa_cumulative" style="float: left; border: 1px solid #000;"></div>
    <div id="spct_cumulative" style="float: left; border: 1px solid #000;"></div>
</div>  

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script> 
<style>
    svg .tooltip { opacity: 1; } 
</style>


<script type="text/javascript">
    var svg = dimple.newSvg("#gaa_cumulative", 500, 450);
    var gaa_cum_data = [{'Season':'2004-2005','Date':'2005-10-02','GAA':'1.00'},{'Season':'2004-2005','Date':'2005-10-08','GAA':'2.03'},{'Season':'2004-2005','Date':'2005-10-26','GAA':'2.36'},{'Season':'2004-2005','Date':'2005-10-30','GAA':'2.52'},{'Season':'2004-2005','Date':'2005-11-21','GAA':'2.19'},{'Season':'2004-2005','Date':'2005-11-21','GAA':'1.80'},{'Season':'2004-2005','Date':'2005-12-10','GAA':'1.52'},{'Season':'2004-2005','Date':'2005-12-10','GAA':'1.85'},{'Season':'2004-2005','Date':'2005-12-15','GAA':'2.10'},{'Season':'2004-2005','Date':'2005-12-27','GAA':'1.99'},{'Season':'2004-2005','Date':'2006-01-16','GAA':'2.27'},{'Season':'2004-2005','Date':'2007-12-24','GAA':'2.25'},{'Season':'2004-2005','Date':'2008-11-30','GAA':'7.01'},{'Season':'2004-2005','Date':'2008-11-30','GAA':'15.58'},{'Season':'2004-2005','Date':'2008-12-02','GAA':'14.42'},{'Season':'2004-2005','Date':'2008-12-02','GAA':'13.36'},]

    var myChart = new dimple.chart(svg, gaa_cum_data);
    myChart.setBounds(60, 30, 400, 300)
    myChart.addCategoryAxis("x", "Date");
    myChart.addCategoryAxis("y", "GAA");
    myChart.addSeries("Season", dimple.plot.line);
    myChart.addLegend(0, 10, 510, 20, "right");
    myChart.defaultColors = [new dimple.color("#98B094")];
    myChart.draw();
  </script>
<script type="text/javascript">
    var svg = dimple.newSvg("#spct_cumulative", 500, 450);
    var spct_cum_data = [{'Season':'2004-2005','Date':'2005-10-02','SPCT':'0.967'},{'Season':'2004-2005','Date':'2005-10-08','SPCT':'0.927'},{'Season':'2004-2005','Date':'2005-10-26','SPCT':'0.909'},{'Season':'2004-2005','Date':'2005-10-30','SPCT':'0.912'},{'Season':'2004-2005','Date':'2005-11-21','SPCT':'0.921'},{'Season':'2004-2005','Date':'2005-11-21','SPCT':'0.934'},{'Season':'2004-2005','Date':'2005-12-10','SPCT':'0.934'},{'Season':'2004-2005','Date':'2005-12-10','SPCT':'0.921'},{'Season':'2004-2005','Date':'2005-12-15','SPCT':'0.911'},{'Season':'2004-2005','Date':'2005-12-27','SPCT':'0.916'},{'Season':'2004-2005','Date':'2006-01-16','SPCT':'0.908'},{'Season':'2004-2005','Date':'2007-12-24','SPCT':'0.914'},{'Season':'2004-2005','Date':'2008-11-30','SPCT':'0.751'},{'Season':'2004-2005','Date':'2008-11-30','SPCT':'0.464'},{'Season':'2004-2005','Date':'2008-12-02','SPCT':'0.534'},{'Season':'2004-2005','Date':'2008-12-02','SPCT':'0.560'},]

    var myChart = new dimple.chart(svg, spct_cum_data);
    myChart.setBounds(60, 30, 400, 300)
    myChart.addCategoryAxis("x", "Date");
    myChart.addCategoryAxis("y", "SPCT");
    myChart.addSeries("Season", dimple.plot.line);
    myChart.addLegend(0, 10, 510, 20, "right");
    myChart.defaultColors = [new dimple.color("#98B094")];
    myChart.draw();
  </script> 

另一方面，蝙蝠侠喜欢Firefox：）

Answer 1

我已经看了一下，这仍然发生在dimple v2.0中。问题是，如果x轴上有类别，它将仅按x位置排序，这意味着2 y值共享x值，它们在排序谓词中评估为相等，因此让浏览器决定哪个是第一个。

我想责怪IE，但这是我的错，我会在下一个版本中修复。在此期间，您可以通过将其添加到代码中来修补您的副本：

dimple._getSeriesSortPredicate = function (chart, series, orderedArray) {
    return function (a, b) {
        var sortValue = 0;
        if (series.x._hasCategories()) {
            sortValue = (dimple._helpers.cx(a, chart, series) - dimple._helpers.cx(b, chart, series));
        } 
        if (sortValue === 0 && series.y._hasCategories()) {
            sortValue = (dimple._helpers.cy(a, chart, series) - dimple._helpers.cy(b, chart, series));
        } 
        if (sortValue === 0 && orderedArray) {
            sortValue = dimple._arrayIndexCompare(orderedArray, a.aggField, b.aggField);
        }
        return sortValue;
    };
};  

您不需要修改凹坑文件，只需将其放在图表代码上方，它将替换凹坑使用的函数。这是一个小提琴：

http://jsfiddle.net/f8HCR/4/