Javascript d3.js x-coord显示不正确

使用d3.js，图形的x坐标显示在x=0或y轴上。x轴表示日期和时间，y轴表示温度。但这只适用于ipad或iphone。在我自己的机器Linux上，它可以正确显示

图表和所有文件可在，

ipad/iphone显示屏

虽然正确的图形是

这里是javascript

 var xScale = d3.scaleTime()
      .domain([new Date(datahourly[0].date), d3.max(datahourly, function(d) {return new Date(d.date)})])
  .range([0, (w-2*padding)]); // max x screen space is width - twice padding


  var yScale = d3.scaleLinear()
      .domain([0, d3.max(datahourly, function(d) {return d.temp})])
      .range([(h-2*padding), 0]); // max y screen space is height - twice padding

  var xAxis =  d3.svg.axis(xScale) // d3 v.4
      .ticks(9) // specify the number of ticks 
    /*.ticks(d3.time.days, 1) */ 
      .tickFormat(d3.time.format('%H:00')) 
      .scale(xScale)
      .orient("bottom");

  var yAxis = d3.svg.axis(yScale)
      .ticks(7)
      .scale(yScale)
      .orient("left");

  var svg = d3.select('#hourly-readings')
      .append('svg') // create an <svg> element
  .attr('id', 'svgDaily')
      .attr('width', w) // set its dimensions
      .attr('height', h);

    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (2*padding - 15) + "," + (padding - 15) + ")")
    .call(yAxis);

svg.append('g')            // create a <g> element
          .attr('class', 'axis')   // specify classes
  .attr("transform", "translate(" + (2*padding - 15) + "," + (h - padding - 15) + ")")
      .call(xAxis);            // let the axis do its thing

  var lineFunctionStart = d3.svg.line()
  .x(function(d) {return xScale(new Date(d.date)); })
  .y(h - 2*padding - 5)
  .interpolate("cardinal");

  var lineFunction = d3.svg.line()
  .x(function(d) {return xScale(new Date(d.date)); })
  .y(function(d) {return yScale(d.temp); })
  .interpolate("cardinal");

  svg.append("path")
      .attr('d', lineFunctionStart(datahourly))
  .attr('stroke', "grey")
  .attr('stroke-width', 1)
  .style('fill', "white")
  .attr("transform","translate(" + (2*padding - 13) + "," + (padding - 10) + ")")
  .transition()
  .duration(3000)
      .attr('d', lineFunction(datahourly));

  //var svg = d3.select('svg');
  var svg = d3.select('#svgDaily');


      svg.append("text")      // text label for the x axis
  .attr("x", 310)
.attr("y", h)
.style("font-size", "12")
  .style("text-anchor", "middle")
  .text("Time (1 hr. intervals)");

svg.append("text")      // text label for the x axis
.attr('transform', 'rotate(-90)')
.attr("x", -85) // Because rotate is first x and y coordinates are transaposed
.attr("y", padding-17)
.style("font-size","10")
  .style("text-anchor", "middle")
  .text("Temp. Celcius");


  var rects = svg.selectAll('circle')
      .data(datahourly);

  var newRects = rects.enter();
      newRects.append('circle')
      .attr('cx', function(d, i) { return (Math.random() * (w - 2*padding)) })
      //.attr('cx', function(d, i) {
          //return (5 + xScale(new Date(d.date)));
          //})
      .attr('cy', (h - (2*padding)))
      .attr('r', 5)
      .style('fill', "lightblue")
      .attr("transform","translate(" + (2*padding - 18) + "," + (padding - 20) + ")")
      .transition()
      .duration(3000)
      .delay(function(d, i) {return i * 300})
      .attr('cx', function(d, i) {
          return (5 + xScale(new Date(d.date)));
          })
      .attr('cy', function(d, i) {
          return 10 + yScale(d.temp);
  });

我在Linux上使用Chrome，在ipad和iphone上使用Safari。但我确实在iphone上安装了chrome，但图表仍然不正确

iOS是否存在svg问题

编辑： 主要问题是时间数据分析不正确

这是正确的解决方案

var data = [];
      $.getJSON("data/data.json",
      function(info){
      data = info[0].fiveMinReadings;
      //console.log(data);
      var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
      data.forEach(function(d) {
          d.date = d.date.slice(0,-3);// remove microseconds
          d.date = parseTime(d.date);
          d.temp = +d.temp;
      });

      // Beginning of graph for 5 minute readings
          var padding = 25;
          var w = 600;
      var h = 300;

      var xScale = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return d.date; }))
              .range([0, (w-2*padding)]); // max x screen space is width - twice padding

      var yScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.temp})])
          .range([(h-2*padding), 0]); // max y screen space is height - twice padding

      var xAxis =  d3.axisBottom(xScale) // d3 v.4
          .tickFormat(d3.timeFormat('%H:%M ')) 
              .scale(xScale);

      var yAxis = d3.axisLeft(yScale)
          .scale(yScale);

      var svg = d3.select('#five-min-readings')
          .append('svg') // create an <svg> element
          .attr('id','svgHourly')
          .attr("align","center")
          .attr('width', w) // set its dimensions
          .attr('height', h);

      var valueline = d3.line()
          .curve(d3.curveCardinal)
          .x(function(d) { return xScale(d.date); })
          .y(h - 2*padding - 4);

      var valueline2 = d3.line()
          .curve(d3.curveCardinal)
          .x(function(d) { return xScale(d.date); })
          .y(function(d) {return yScale(d.temp); });

      svg.append("text")      // text label for the x axis
          .attr("x", 310)
          .attr("y", h)
          .style("font-size", "12")
          .style("text-anchor", "middle")
          .text("Time (5 min. intervals)");

      svg.append("text")      // text label for the x axis
          .attr('transform', 'rotate(-90)')
          .attr("x", -85) // Because rotate is first, x and y coordinates are transaposed
          .attr("y", padding-17)
          .style("font-size","10")
          .style("text-anchor", "middle")
          .text("Temp. Celcius");

          svg.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(" + (2*padding-15) + "," + (padding-15) + ")")
          .call(yAxis);

      svg.append('g')            // create a <g> element
          .attr('class', 'axis')   // specify class
          .attr("transform", "translate(" + (2*padding-15) + "," + (h - padding - 15) + ")")
              .call(xAxis);            // let the axis do its thing

      svg.append('path')
          .data([data])
          .attr("class","line")
          .attr('d', valueline)
          .attr('stroke', "grey")
          .attr('stroke-width', 1)
          .style('fill', "white")
          .attr("transform","translate(" + (2*padding - 13) + "," + (padding -10) + ")")
          .transition()
          .duration(3000)
          .attr('d', valueline2 );    

      var svg = d3.select('#svgHourly');

      var rects = svg.selectAll('circle')
          .data(data);

      var newRects = rects.enter();

      newRects.append('circle')
          .attr('cx', function(d, i) { return (Math.random() * (w - 2*padding)) })
          .attr('cy', h - 2*padding)      
          .attr('r', 5)
          .attr("id", function(d,i){return "circle" + i})
          .style('fill', "lightblue")
          .attr("transform","translate(" + (2*padding - 18) + "," + (padding - 20) + ")")
          .transition()
          .duration(3000)
          .delay(function(d, i) {return i * 300})
              .attr('cx', function(d, i) {  return (5 + xScale(d.date)); })
          .attr('cy', function(d, i) { return 10 + yScale(d.temp); });        
       }); // closes getJSON()

var数据=[]；
$.getJSON（“data/data.json”，
功能（信息）{
数据=信息[0]。五个最小读数；
//控制台日志（数据）；
var parseTime=d3.timeParse（“%Y-%m-%d%H:%m:%S.%L”）；
data.forEach（函数（d）{
d、 date=d.date.slice（0，-3）；//删除微秒
d、 日期=解析时间（d.日期）；
d、 温度=+d温度；
});
//开始5分钟读数的图表
var=25；
var w=600；
var h=300；
var xScale=d3.scaleTime（）
.domain（d3.extent（数据，函数（d）{返回d.date；}））
.range（[0，（w-2*填充）]；//最大x屏幕空间为宽度-两倍填充
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d）{返回d.temp}）]）
.range（[（h-2*填充），0]）；//最大y屏幕空间为高度-两倍填充
var xAxis=d3.axisBottom（xScale）//d3 v.4
.tickFormat（d3.timeFormat（“%H:%M”））
.比例（xScale）；
var yAxis=d3.axisLeft（yScale）
.比例尺（yScale）；
var svg=d3。选择（“#五分钟读数”）
.append（'svg'）//创建一个元素
.attr（'id'，'svgHourly'））
.attr（“对齐”、“居中”）
.attr（'width'，w）//设置其尺寸
.attr（'高度'，h）；
var valueline=d3.line（）
.曲线（d3.曲线中心）
.x（函数（d）{return xScale（d.date）；}）
.y（h-2*填充-4）；
var valueline2=d3.line（）
.曲线（d3.曲线中心）
.x（函数（d）{return xScale（d.date）；}）
.y（函数（d）{返回yScale（d.temp）；}）；
svg.append（“text”）//x轴的文本标签
.attr（“x”，310）
.attr（“y”，h）
.style（“字体大小”、“12”）
.style（“文本锚定”、“中间”）
.文本（“时间（5分钟间隔）”；
svg.append（“text”）//x轴的文本标签
.attr（'transform'、'rotate（-90'））
.attr（“x”，-85）//因为旋转是第一位的，所以x和y坐标是反作用的
.attr（“y”，填充-17）
.style（“字体大小”，“10”）
.style（“文本锚定”、“中间”）
.文本（“临时Celcius”）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+（2*padding-15）+）、“+（padding-15）+”）
.呼叫（yAxis）；
append（'g'）//创建一个元素
.attr（'class'，'axis'）//指定类
.attr（“转换”、“转换”（+（2*padding-15）+），“+（h-padding-15）+”）
.call（xAxis）；//让轴心做它自己的事
append（'path'）
.数据（[数据]）
.attr（“类”、“行”）
.attr（'d'，valueline）
.attr（'笔划'，“灰色”）
.attr（'笔划宽度'，1）
.style（“填充”、“白色”）
.attr（“转换”、“转换”（+（2*padding-13）+）、“+（padding-10）+”）
.transition（）
.持续时间（3000）
.attr（'d'，valueline2）；
var svg=d3.选择（'svgHourly'）；
var rects=svg.selectAll（'circle'）
.数据（数据）；
var newRects=rects.enter（）；
newRects.append（'circle'）
.attr（'cx'，函数（d，i）{return（Math.random（）*（w-2*padding））}
.attr（'cy'，h-2*填充）
.attr（'r'，5）
.attr（“id”，函数（d，i）{返回“圆”+i}）
.style（'填充'，“浅蓝色”）
.attr（“转换”、“转换”（+（2*padding-18）+）、“+（padding-20）+”）
.transition（）
.持续时间（3000）
.delay（函数（d，i）{返回i*300}）
.attr（'cx'，函数（d，i）{return（5+xScale（d.date））；}）
.attr（'cy'，函数（d，i）{return 10+yScale（d.temp）；}）；
}); // 关闭getJSON（）

您可以清楚地看到，您的圆得到的是正确的y（“cy”）值，错误在于x（“cx”）值

问题似乎是在Safari中使用

newdate（）

时使用了以下模式：

yyyy-MM-dd

在您的代码中，给定您的数据结构，您将在line generator中得到如下结果：

.x(function(d) {
    return xScale(new Date("2016-12-15 23:01:01.963714")); 
})//the first date in your data ---^

你的圈子也是这样：

.attr('cx', function(d, i) {
    return (5 + xScale(new Date("2016-12-15 23:01:01.963714")));
})

显然，Chrome和Firefox支持这一点，但Safari不支持。奇怪的是，模式（

yyyy-MM-dd

）包含在中，因此这可能是Safari特有的问题

根据，如果您包含一个

T

（我没有测试它），它将起作用：

或者，删除

newdate（）

并使用D3解析日期（

D3.timeParse（）

在D3 v4.x中，以及

format.parse（）

在D3 v3.x中）

编辑：总结一下，您有两种可能的解决方案：

解决方案1：删除所有

newdate

函数（在线生成器上和使用它的所有刻度中），并使用d3解析日期。您使用的是D3V3.x，但您的代码使用的是D3V4.x。然而，下面是如何使用d3 v3.x来实现这一点：

var date=“2016-12-14 22:01:01.799830”。切片（0，-3）；
var format=d3.time.format（“%Y-%m-%d%H:%m:%S.%L”）；
var myDate=format.parse（日期）；
console.log（myDate）
似乎
.attr('cx', function(d, i) {
    return (5 + xScale(new Date("2016-12-15 23:01:01.963714")));
})

.x(function(d) {
    return xScale(new Date("2016-12-15T23:01:01.963714")); 
})

var commonDate = item.created_at.replace(/\s/, "T");
var date = new Date(commonDate);