Dimple.js 散点图在 Firefox v. 38.0.5 中无法正确绘制

Question

我正在学习使用 d3 和 dimple，并使用示例图表作为指导 (dimplejs.org/examples_viewer.html?id=scatter_standard)，我尝试制作我自己的简单散点图。

这是我用来生成图表的脚本：

var chart2 = function chart1(city) {
var svg1 = dimple.newSvg("#chartContainer", 767, 670);
  d3.tsv("test2.tsv", function (data) {
    data = dimple.filterData(data, "Region", city);
    var myChart = new dimple.chart(svg1, data);
    myChart.setBounds(60, 65, 650, 390);
    var y = myChart.addMeasureAxis("y", "Percent");
    y.tickFormat = "%";
    var x = myChart.addCategoryAxis("x", "Period");             
    myChart.addSeries(["Period", "Total"], dimple.plot.bubble);
    myChart.defaultColors = [new dimple.color("red")];
    myChart.staggerDraw = true;
    myChart.ease = "linear";
    myChart.draw(500);

  });};
  var cityPrompt = prompt("Enter the name of the city:");
  chart2(cityPrompt);

它运行在 Chrome 中很好（版本 43.0.2357.130 m）：chart for city "Alpha" in Chrome

但是当我运行它在Firefox（版本38.0.5）中时，图表是基于y轴绘制的，因此图表是从左到右的递减趋势，按照最高的顺序百分比到最低百分比：chart for city "Alpha" in Firefox

我希望并希望图表按照在 Chrome 中绘制的方式绘制，但我不知道如何对其进行编码，以便它在 Firefox 中也能正确绘制。

如有任何帮助，我们将不胜感激。

这是我正在使用的 tsv 文件中的数据：

Region  Period  "Total" "Percent"                           
Alpha   1   123 .24                     
Alpha   2   167 .33                     
Alpha   3   209 .67                     
Alpha   4   121 .56                         
Alpha   5   195 .45                         
Alpha   6   132 .81                         
Alpha   7   234 .94                         
Beta    1   99  .02                         
Beta    2   127 .03                         
Beta    3   709 .21                         
Beta    4   85  .37                         
Beta    5   92  .11                         
Beta    6   238 .27                         
Beta    7   154 .70                         
Gamma   1   383 .15                         
Gamma   2   226 .23                         
Gamma   3   167 .41                         
Gamma   4   62  .64                         
Gamma   5   87  .78                         
Gamma   6   172 .55                         
Gamma   7   369 .88

Answer 1

造成差异的原因是 Chrome 将这些数字解析为日期，而 Firefox 拒绝了它们。严格来说，我会说 Firefox 在这里是正确的，逻辑是除非分类轴有日期值，否则按 y 值降序对值进行排序，但是 Chrome 对它认为是日期的内容非常宽松。但是，您可以通过明确选择订购方式来避免任何混淆：

x.addOrderRule("Period");

到位了：

var chart2 = function chart1(city) {
var svg1 = dimple.newSvg("#chartContainer", 767, 670);


d3.tsv("test2.tsv", function (data) {
    data = dimple.filterData(data, "Region", city);
    var myChart = new dimple.chart(svg1, data);
    myChart.setBounds(60, 65, 650, 390);
    var y = myChart.addMeasureAxis("y", "Percent");
    y.tickFormat = "%";
    var x = myChart.addCategoryAxis("x", "Period");      
    x.addOrderRule("Period");       
    myChart.addSeries(["Period", "Total"], dimple.plot.bubble);
    myChart.defaultColors = [new dimple.color("red")];
    myChart.staggerDraw = true;
    myChart.ease = "linear";
    myChart.draw(500);

});};
var cityPrompt = prompt("Enter the name of the city:");
chart2(cityPrompt);

Dimple.js 散点图在 Firefox v. 38.0.5 中无法正确绘制

Dimple.js scatter plot not drawing correctly in Firefox v. 38.0.5

javascript

firefox

d3.js

dimple.js