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米）：chart for city "Alpha" in Chrome

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

我希望并希望图表能够在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);

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

1 个答案: