Fatal编程技术网
  • javascript/
  • Javascript 在D3中绘制日期和时间

Javascript 在D3中绘制日期和时间

javascript d3.js plot

Javascript 在D3中绘制日期和时间,javascript,d3.js,plot,Javascript,D3.js,Plot,我正试图绘制从气象站获取的时间读数。每天应该有24个读数。因此，这里的目标是在x轴上绘制日期（mmmdd），在y轴上绘制时间（HH:mm） 我从unix时间戳开始，我最迷茫的是如何在绘图中区分日期和时间。我认为在解析过程中这样做，然后绘制这两个图是可行的，但是不行 var formatTime=d3.time.format（“%H:%M”） formatDate=d3.time.format（“%b%e”） var margin={顶部：10，右侧：30，底部：30，左侧：30}， 宽度=96

我正试图绘制从气象站获取的时间读数。每天应该有24个读数。因此，这里的目标是在x轴上绘制日期（mmmdd），在y轴上绘制时间（HH:mm）

我从unix时间戳开始，我最迷茫的是如何在绘图中区分日期和时间。我认为在解析过程中这样做，然后绘制这两个图是可行的，但是不行

var formatTime=d3.time.format（“%H:%M”）
formatDate=d3.time.format（“%b%e”）
var margin={顶部：10，右侧：30，底部：30，左侧：30}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.json（“http://www.microveggies.com/data/get/all/all/range/2015-01-01/2016-02-17，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
d、 时间=格式时间（新日期（d.时间戳*1000））；
d、 日期=格式日期（新日期（d.时间戳*1000））；
d、 外部温度=+d.外部温度；
});
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.time.scale（）.range（[height，0]）；
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（d3.extent（数据，函数（d）{返回d.time；}））；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（'底部'）
.滴答声（d3.time.days，1）
.1.1尺寸（0）
.1（8）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.滴答声（d3.time.minutes，30）
.1.1尺寸（0）
.1（8）；
//添加散点图
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，3.5）
.attr（“cx”，函数（d）{返回d.date；}）
.attr（“cy”，函数（d）{返回d.time；}）；
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
});

正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
多特先生{
行程：#000；
}
svg{
保证金：0自动；
}


所以问题在于独立于d3.js，它是关于在js中处理时间戳和格式化的，对吗？我建议看一下wich，它使处理日期和时间变得非常方便。





.图表{
字体系列：Arial，无衬线；
字体大小：10px；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
var保证金={
前40名，
右:40,，
底数：40，
左：40
},
宽度=600，
高度=400；
var formatTime=d3.time.format（“%H:%M:00”）
formatDate=d3.time.format（“%Y-%m-%d”）；
d3.json（“http://www.microveggies.com/data/get/all/all/range/2015-01-01/2016-02-17，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
d、 时间=格式时间（新日期（d.时间戳*1000））；
d、 日期=格式日期（新日期（d.时间戳*1000））；
d、 外部温度=+d.外部温度；
});
log（JSON.stringify（data））；
var x=d3.time.scale（）
.domain（[d3.time.day.offset（新日期（数据[data.length-1].Date），0），新日期（数据[0].Date）]）
.rangeRound（[0，宽度-边距。左侧-边距。右侧]）；
变量y=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回24；
})])
.范围（[height-margin.top-margin.bottom，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（'底部'）
.滴答声（d3.time.days，1）
.tickFormat（d3.time.format（“%d-%m-%Y”））
.1.1尺寸（0）
.1（8）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.1（8）；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'类'，'图表'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
svg.selectAll（“.chart”）
.数据（数据）
.enter（）.append（'圆'）
.attr（'cx'，函数（d）{
返回x（新日期（d.Date））；
})
.attr（'cy'，函数（d）{
返回高度-80-（新日期（“2015-01-01”+d.time）.getHours（）*（高度-80）/24）；
})
.attr（'r'，函数（d）{
返回（d.外部温度+3）/10；
});
append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+（height-margin.top-margin.bottom）+'））
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“变换”、“旋转（40）”）
.style（“文本锚定”、“开始”）；
append（'g'）
.attr（'class'，'y轴'）
.呼叫（yAxis）；
});

我不确定是不是这样。我认为更多的是把时间戳当作d3中的值来处理。有很多关于一个时间轴的教程，但我想做两个。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .chart {
    font-family: Arial, sans-serif;
    font-size: 10px;
  }

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

<body>

  <!-- load the d3.js library -->
  <script src="./d3.min.js"></script>

  <script>
    var margin = {
        top: 40,
        right: 40,
        bottom: 40,
        left: 40
      },
      width = 600,
      height = 400;

    var formatTime = d3.time.format("%H:%M:00")
    formatDate = d3.time.format("%Y-%m-%d");

    d3.json("http://www.microveggies.com/data/get/all/all/range/2015-01-01/2016-02-17", function (error, data) {
      if (error) throw error;
      data.forEach(function (d) {
        d.time = formatTime(new Date(d.timestamp * 1000));
        d.date = formatDate(new Date(d.timestamp * 1000));
        d.external_temp = +d.external_temp;
      });
      console.log(JSON.stringify(data));

      var x = d3.time.scale()
        .domain([d3.time.day.offset(new Date(data[data.length - 1].date), 0), new Date(data[0].date)])
        .rangeRound([0, width - margin.left - margin.right]);

      var y = d3.scale.linear()
        .domain([0, d3.max(data, function (d) {
          return 24;
        })])
        .range([height - margin.top - margin.bottom, 0]);

      var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(d3.time.days, 1)
        .tickFormat(d3.time.format('%d-%m-%Y'))
        .tickSize(0)
        .tickPadding(8);

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')
        .tickPadding(8);

      var svg = d3.select('body').append('svg')
        .attr('class', 'chart')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

      svg.selectAll('.chart')
        .data(data)
        .enter().append('circle')
        .attr('cx', function (d) {
          return x(new Date(d.date));
        })
        .attr('cy', function (d) {
          return height - 80 - (new Date("2015-01-01 " + d.time).getHours() * (height - 80) / 24);
        })
        .attr('r', function (d) {
          return (d.external_temp + 3) / 10;
        });

      svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
        .call(xAxis)
        .selectAll("text")
        .attr("transform", "rotate(40)")
        .style("text-anchor", "start");

      svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis);

    });
  </script>
</body>