D3线图没有在windows firefox中显示但在ubuntu中有效

Question

下面的行图没有显示在windows中的firefox中，但也适用于ubuntu firefox和chrome。如果你在Windows中运行此代码，则不会显示firefox行。红色和蓝色线条我希望在下图中可见。

＆＃13;

＆＃13;

var n = 120;//number of seconds to be seen on chart / duration  (120 means 10mt(600sec) chart for duration = 5sec)
var clientsArray ={"grid_ar":[{"c":"grey","t":2000,"i":"NA","ul":" ","dl":" ","ulv":"400.0","dlv":"100.0","st":"CONNECTED","ssid":"NA","bssid":"NA","rssi":"NA","ipv6":"NA"},{"c":"grey","t":2001,"i":"NA","ul":"","dl":"","ulv":"0.0","dlv":"0.0","st":"CONNECTED","ssid":"NA","bssid":"NA","rssi":"NA","ipv6":"NA"},
{"c":"grey","t":2002,"i":"NA","ul":"","dl":"","ulv":"20.0","dlv":"0.0","st":"CONNECTED","ssid":"NA","bssid":"NA","rssi":"NA","ipv6":"NA"}]};

var chartWidth = 500;
var clientWidth = 37.5;
var chartHeight = 175;
var svg = d3.select("#chart")
	.append('svg:svg')
	.attr('width', chartWidth)
	.style("border-style", "none")
	.attr('height', chartHeight);
  
    duration =2000, //update interval in msec
    now = new Date(Date.now() - duration),
    data1 = d3.range(n).map(function() { return 0; });
    data2 = d3.range(n).map(function() { return 0; });
    data3 = d3.range(n).map(function() { return 0; });
    
var trendWidth = chartWidth*1.0-clientWidth*0.5 ;
var trendHeight = chartWidth*0.3;
var x = d3.time.scale()
    .domain([now - (n - 1) * duration, now - 0*duration])
    .range([0, trendWidth]);

var y1 = d3.scale.linear()
    .domain([0, 400])
    .range([trendHeight, 0]);

var y2 = d3.scale.linear()
    .domain([0, 400])
    .range([trendHeight, 0]);

var y3 = d3.scale.linear()
    .domain([0, 3])
    .range([trendHeight, 0]);

var line1 = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
    .y(function(d, i) { return y1(d); });

var line2 = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
    .y(function(d, i) { return y2(d); });

var line3 = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
    .y(function(d, i) { return y3(d); });

var area3 = d3.svg.area()
  .interpolate('monotone')
  .x(function(d, i) { return x(now - (n - 1 - i) * duration);})
  .y(function(d, i) { return y3(d);})
  .y0(trendHeight*1)

var xaxis1 = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate("+(clientWidth*0.5)+"," + (chartHeight) + ")")
    .attr("font-size", function(d,i) { return clientWidth*0.2+"px";})
    .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

var y12axis = svg.append("g")
    .attr("class", "y12 axis")
    .attr("font-size", function(d,i) { return clientWidth*0.2+"px";})
    .attr("transform", "translate("+(trendWidth+clientWidth*0.5)+"," + (chartHeight*0.995-trendHeight) + ")")
    .call(d3.svg.axis().scale(y1).orient("right"));

var y3axis = svg.append("g")
    .attr("class", "y3 axis")
    .attr("font-size", function(d,i) { return clientWidth*0.2+"px";})
    .attr("transform", "translate("+(trendWidth+clientWidth*1.2)+"," + (chartHeight*0.995-trendHeight) + ")")
    .call(d3.svg.axis().scale(y3).orient("right"));

var path1 = svg.append("g")
    .attr("clip-path", "url(#clip1)")
    .attr("transform", "translate("+(clientWidth*0.25)+"," + (chartHeight-trendHeight) + ")")
  .append("path")
    .datum(data1)
    .attr("class", "line1")
    .attr("stroke", "blue")
    .attr("d", line1);
var path2 = svg.append("g")
    .attr("clip-path", "url(#clip2)")
    .attr("transform", "translate("+(clientWidth*0.25)+"," + (chartHeight-trendHeight) + ")")
  .append("path")
    .datum(data2)
    .attr("class", "line2")
    .attr("stroke", "red")
    .attr("d", line2);
var path3 = svg.append("g")
    .attr("clip-path", "url(#clip3)")
    .attr("transform", "translate("+(clientWidth*0.25)+"," + (chartHeight-trendHeight) + ")")
  .append("path")
    .datum(data3)
    .attr("class", "line3")
    .attr("stroke", "none")
    .attr("d", line3)

var path4 = svg.append("g")
    .attr("transform", "translate("+(clientWidth*0.25)+"," + (chartHeight-trendHeight) + ")")
  .append("path")
    .datum(data3)
    .attr("class", "area3")
    .attr('fill', 'green')
    .style("fill-opacity", 0.3)
    .attr("d", area3);

var transition = d3.select({}).transition()
    .duration(duration)
    .ease("linear");

(function tick() {
  transition = transition.each(function() {

    //console.log("x");
    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);

    // Taking some dummy data; here we need to call server
    var dltSum = 0;
    var ultSum = 0;
    var conClSum = 0;
    
    for(var i=0;i<2;i++){
       if(clientsArray.grid_ar[i].st == "CONNECTED") {
          conClSum = conClSum + 1;
	  ultSum=ultSum+parseFloat(clientsArray.grid_ar[i].ulv);
	  dltSum=dltSum+parseFloat(clientsArray.grid_ar[i].dlv);
       }
    }

    //data1.push(Math.floor(Math.random() * 101));
    //data2.push(Math.floor(Math.random() * 101));
    //data3.push(Math.floor(Math.random() * 257));
    data1.push(dltSum);
    data2.push(ultSum);
    data3.push(conClSum);

    // redraw the line
    svg.select(".line1")
        .attr("d", line1)
        .attr("transform", null);

    svg.select(".line2")
        .attr("d", line2)
        .attr("transform", null);

    svg.select(".line3")
        .attr("d", line3)
        .attr("transform", null);

    svg.select(".area3")
        .attr("d", area3)
        .attr("transform", null);

    // slide the x-axis left
    xaxis1.call(x.axis);
    //xaxis2.call(x.axis);
    //xaxis3.call(x.axis);

    // slide the line left
    path1.transition()
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ",0)");

    path2.transition()
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ",0)");

    path3.transition()
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ",0)");

    path4.transition()
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ",0)");

    // pop the old data point off the front
    data1.shift();
    data2.shift();
    data3.shift();

  }).transition().each("start", tick);
})();

＆＃13;

.line1 {
           fill: none;
           stroke-width: 1px;
       }

       .line2 {
           fill: none;
           stroke-width: 1px;
       }

       .line3 {
           fill: none;
           stroke-width: 1px;
       }

       .axis path,
       .axis line {
           fill: none;
           stroke: #000;
           shape-rendering: crispEdges;
       }

       .axis path,
       .axis line,
       .axis1 path,
       .axis1 line {
           fill: none;
           stroke: #E6E7E8;
           shape-rendering: crispEdges;
       }
       .brush .extent {
         stroke: #FFF;
         shape-rendering: crispEdges;
       }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

＆＃13;

＆＃13;

＆＃13;

Chrome： Firefox：

这可能是什么问题？任何帮助将不胜感激。提前谢谢。