jquery mobile d3图表在chrome中工作，而不是在firefox中

令人困惑的问题：

我的d3图表有一个日期选择器（右箭头），它在一个独立的文件中工作。我所说的“工作”是指当你点击右箭头时，它会在数据数组中前进，并且图表栏会更新

但是，在jquery mobile多页文档中，它在Firefox中不起作用。在jqm multipage中，它可以在Chrome（linux和windows）和IE中工作

简单地说，您可以单击“图表页面”，然后单击右箭头查看每天的数据

不要担心箭头代码，我必须修复它。让我担心的是，这在Firefox中不起作用

这是你的电话号码。在那些浏览器中尝试一下

html:

js:

（函数（）{
var保证金={
前20名，
右:20,，
底数：40，
左：80
},
宽度=340-边距.左-边距.右，
高度=250-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1，1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）；
var svg=d3。选择（'.chart here'）。追加（'svg'））
.attr（'viewBox'，'0 0 340 250'）
.attr（'preserveAspectRatio'，'xMinYMin-meet'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left/1.5+'，'+margin.top/1.5+））；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.滴答声（5）
.outerTickSize（0）
.tickFormat（d3.format（'，.3s'））；
var barchart_i=0；
变量arr1=[{
“期间”：“天”，
“所有汽车”标题：“2016年3月1日，星期二，汽车行驶里程。总里程：45495万英里。”，
“汽车”：[{
“雪佛兰”：33733000
}, {
“福特”：3263000
}, {
“本田”：119182000
}, {
“特斯拉”：614000
}, {
“奥迪”：268292000
}, {
“悍马”：493000
}]
}, {
“期间”：“天”，
“所有汽车”标题：“2016年3月2日星期三的汽车里程。总里程：45726万英里。”，
“汽车”：[{
“雪佛兰”：23052000
}, {
“福特”：44630000
}, {
“本田”：121635000
}, {
“特斯拉”：2599000
}, {
“奥迪”：264247000
}, {
“悍马”：1100000
}]
}, {
“期间”：“天”，
“所有汽车”标题：“2016年3月3日，星期四，汽车行驶里程。总里程：45296万英里。”，
“汽车”：[{
“雪佛兰”：8577000
}, {
“福特”：54172000
}, {
“本田”：121661000
}, {
“特斯拉”：1975000
}, {
“奥迪”：265483000
}, {
“悍马”：1089000
}]
}];
var period_grain=arr1[0]。期间；
var allcars_小时=arr1[条形图_i]；
var car=所有车辆\每小时车辆；
var allcars\u dash\u title=所有车辆\u小时。所有车辆\u title；
jQuery（'.barchart_title'）.text（allcars_dash_title）；
var newobj=[]；
对于（var allcars_hourx1=0；allcars_hourx1staticMax？d.miles:staticMax；
})]);
append（'g'）
.attr（'class'，'y轴'）
.呼叫（yAxis）
.append（'文本'）
.attr（'y'，6）
.attr（'dy'，'.71em'））
.style（'text-anchor'，'start'）；
var changeHour=函数（）{
var dataJoin=svg.selectAll（“.bar”）
.数据（数据、功能（d）{
返回d.car；
});
svg.selectAll（“.y.axis”）
.呼叫（yAxis）；
xtext=svg.append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（-20'，+height+'））/*移动勾号文本，使其与矩形对齐*/
.呼叫（xAxis）
/*第一次激发的可能新元素设置非数据相关属性*/
数据连接
.输入（）
.append（'rect'）
.attr（'class'，'bar'）
.attr（'transform'、'translate（-20））/*将矩形移近Y轴*/
/*对依赖于数据值（d）的现有元素（现在包括上面新添加的元素）的更改*/
数据连接
.attr（'x'，函数（d）{
返回x（d.car）；
})
.attr（'width'，x.rangeBand（）*1）
.attr（'y'，函数（d）{
返回y（d.miles）；
})
.attr（高度），功能（d）{
返回高度-y（d.英里）；
})
.样式（“填充”，功能（d）{
如果（d.car==‘奥迪’| | d.car==‘雪佛兰’| | d.car==‘本田’| | d.car==‘悍马’）{
返回“绿色”；
}否则{
返回“#404040”；
}
})
xtext.selectAll（'text'）
.attr（'transform'，函数（d）{
返回“translate（'+this.getBBox（）.height*50+”，“+this.getBBox（）.height+”）rotate（0）”；
});
dataJoin.exit（）.remove（）；
}
改变时间（）；
//函数允许用户单击箭头以查看下一个/上一个期间\u
//此按钮将增加值
$（'.right next'）。单击（函数（e）{
//别像个按钮似的
e、 预防默认值（）；
//获取字段名
fieldName=$（this.attr（'field'）；
//获取其当前值
条形图i=parseInt（$（'input[name='+fieldName+']'）.val（））；
//如果不是未定义的
如果（！isNaN（条形图_i））{
//增量
$（'input[name='+fieldName+']'）.val（条形图i+1）；
}否则{
//否则设置为0
$（'input[name='+fieldName+']'）.val（0）；
}
递增小时（）；
});
//此按钮将使该值递减至0
$（'.left previous'）。单击（函数（e）{
//别像个按钮似的
<!-- Start of first page: #one -->
<div data-role='page' id='one'>

  <div data-role='header'>
    <h1>Multi-page</h1>
  </div>
  <!-- /header -->

  <div data-role='content'>
    <h2>One</h2>

    <p>I have an <code>id</code> of 'one' on my page container. I'm first in the source order so I'm shown when the page loads.</p>

    <h3>Show internal pages:</h3>
    <p><a href='#snapshot-chart-page' data-role='button'>Chart page</a></p>
  </div>
  <!-- /content -->

  <div data-role='footer' data-theme='d'>
    <h4>Page Footer</h4>
  </div>
  <!-- /footer -->
</div>
<!-- /page one -->
<div data-role='page' id='snapshot-chart-page' data-ajax='false'>
  <div data-role='header' style='background:#82ca46;'>
    <a href='#nav-panel' data-icon='bars' data-iconpos='notext' class='ui-nodisc-icon' style='background-color: transparent;'>Menu</a>
    <div align='center' style='vertical-align:top;'>
      <h1>Page title
                </h1></div>
    <a href='#add-form' data-icon='calendar' data-iconpos='notext' class='ui-nodisc-icon' style='background-color: transparent;'>Add</a>
  </div>
  <!-- /header -->
  <div role='main' class='ui-content'>
    <div style='width:100%; margin: 0;padding: 0; overflow: auto;'>
      <form style='display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;'>

        <input type='button' data-role='button' data-icon='arrow-l' data-iconpos='notext' class='ui-nodisc-icon previous-next-period left-previous select-custom-14' style='background-color: transparent;' field='quantity'>
        <input type='text' name='quantity' value='0' class='qty' />
        <input type='button' data-role='button' data-icon='arrow-r' data-iconpos='notext' class='ui-nodisc-icon previous-next-period right-next select-custom-14' style='background-color: transparent;' field='quantity'>

      </form>

      <table data-role='table' data-transition='fade' class='ghg-tables'>
        <caption class='barchart_title tabletitle'></caption>
        <thead>
        </thead>
      </table>
      <div class='chart-here'></div>
    </div>
  </div>
  <!-- /main -->
</div>
<!-- /snapshot-chart-page -->

(function() {
  var margin = {
      top: 20,
      right: 20,
      bottom: 40,
      left: 80
    },
    width = 340 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 1);

  var y = d3.scale.linear()
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

  var svg = d3.select('.chart-here').append('svg')
    .attr('viewBox', '0 0 340 250')
    .attr('preserveAspectRatio', 'xMinYMin meet')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left / 1.5 + ',' + margin.top / 1.5 + ')');

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(5)
    .outerTickSize(0)
    .tickFormat(d3.format(',.3s'));

  var barchart_i = 0;
  var arr1 = [{
    "period": "day",
    "allcars_title": "Mileage by car, on Tuesday, March 01 2016. Total: 454.95M mi.",
    "car": [{
      "Chevvy": 33733000
    }, {
      "Ford": 32633000
    }, {
      "Honda": 119182000
    }, {
      "Tesla": 614000
    }, {
      "Audi": 268292000
    }, {
      "Hummer": 493000
    }]
  }, {
    "period": "day",
    "allcars_title": "Mileage by car, on Wednesday, March 02 2016. Total: 457.26M mi.",
    "car": [{
      "Chevvy": 23052000
    }, {
      "Ford": 44630000
    }, {
      "Honda": 121635000
    }, {
      "Tesla": 2599000
    }, {
      "Audi": 264247000
    }, {
      "Hummer": 1100000
    }]
  }, {
    "period": "day",
    "allcars_title": "Mileage by car, on Thursday, March 03 2016. Total: 452.96M mi.",
    "car": [{
      "Chevvy": 8577000
    }, {
      "Ford": 54172000
    }, {
      "Honda": 121661000
    }, {
      "Tesla": 1975000
    }, {
      "Audi": 265483000
    }, {
      "Hummer": 1089000
    }]
  }];
  var period_grain = arr1[0].period;
  var allcars_hour = arr1[barchart_i];
  var car = allcars_hour.car;
  var allcars_dash_title = allcars_hour.allcars_title;
  jQuery('.barchart_title').text(allcars_dash_title);
  var newobj = [];
  for (var allcars_hourx1 = 0; allcars_hourx1 < car.length; allcars_hourx1++) {
    var xx = car[allcars_hourx1];
    for (var value in xx) {
      var chartvar = newobj.push({
        car: value,
        miles: xx[value]
      });
      var data = newobj;
      data = data.sort(function(a, b) {
        return b.miles - a.miles;
      });
    }
  }
  x.domain(data.map(function(d) {
    return d.car;
  }));
  if (period_grain == 'hour') {
    var staticMax = 13000000;
  }
  if (period_grain == 'day') {
    var staticMax = 300000000;
  }
  if (period_grain == 'month') {
    var staticMax = 2000000;
  }
  if (period_grain == 'year') {
    var staticMax = 35000000;
  }

  y.domain([0, d3.max(data, function(d) {
    return d.miles > staticMax ? d.miles : staticMax;
  })]);

  svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')
    .attr('y', 6)
    .attr('dy', '.71em')
    .style('text-anchor', 'start');

  var changeHour = function() {
    var dataJoin = svg.selectAll('.bar')
      .data(data, function(d) {
        return d.car;
      });

    svg.selectAll('.y.axis')
      .call(yAxis);
    xtext = svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(-20,' + height + ')') /*move tick text so it aligns with rects*/
      .call(xAxis)
      /* possible new elements, fired first time, set non-data dependent attributes*/
    dataJoin
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('transform', 'translate(-20)') /*move rects closer to Y axis*/


    /* changes to existing elements (now including the newly appended elements from above) which depend on data values (d)*/
    dataJoin
      .attr('x', function(d) {
        return x(d.car);
      })
      .attr('width', x.rangeBand() * 1)
      .attr('y', function(d) {
        return y(d.miles);
      })
      .attr('height', function(d) {
        return height - y(d.miles);
      })
      .style('fill', function(d) {
        if (d.car == 'Audi' || d.car == 'Chevvy' || d.car == 'Honda' || d.car == 'Hummer') {
          return 'green';
        } else {
          return '#404040';
        }
      })
    xtext.selectAll('text')
      .attr('transform', function(d) {
        return 'translate(' + this.getBBox().height * 50 + ',' + this.getBBox().height + ')rotate(0)';
      });
    dataJoin.exit().remove();

  }
  changeHour();

  //function to allow user to click arrows to view next/previous period_grain
  // This button will increment the value
  $('.right-next').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    barchart_i = parseInt($('input[name=' + fieldName + ']').val());
    // If is not undefined
    if (!isNaN(barchart_i)) {
      // Increment
      $('input[name=' + fieldName + ']').val(barchart_i + 1);
    } else {
      // Otherwise set to 0
      $('input[name=' + fieldName + ']').val(0);
    }
    incrementHour();
  });
  // This button will decrement the value till 0
  $('.left-previous').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    barchart_i = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or if it is greater than 0
    if (!isNaN(barchart_i) && barchart_i > 0) {
      // Decrement one
      $('input[name=' + fieldName + ']').val(barchart_i - 1);
    } else {
      // Otherwise set to 0
      $('input[name=' + fieldName + ']').val(0);
    }
    incrementHour();
  });


  incrementHour = function() {
    allcars_hour = arr1[barchart_i];

    var car = allcars_hour.car;
    var allcars_dash_title = allcars_hour.allcars_title;

    var newobj = [];
    for (var allcars_hourx1 = 0; allcars_hourx1 < car.length; allcars_hourx1++) {
      var xx = car[allcars_hourx1];
      for (var value in xx) {
        var chartvar = newobj.push({
          car: value,
          miles: xx[value]
        });
      }
    }
    data = newobj;
    console.log('data is ' + data);
    data = data.sort(function(a, b) {
      return b.miles - a.miles;
    });

    x.domain(data.map(function(d) {
      return d.car;
    }));
    y.domain([0, d3.max(data, function(d) {
      return d.miles > staticMax ? d.miles : staticMax;
    })]);
    jQuery('.barchart_title').text(allcars_dash_title);
    changeHour();
  };
})();