javascript - 当x轴和数据有时间范围时如何将数据放在折线图上

Question

我需要使用 d3 创建一个折线图，其中 x 轴的时间格式为 %H:%M:%S，间隔为 1 小时。我正在使用 d3.svg.line 在图表上画线。 X 轴和 Y 轴都正确绘制，但无法绘制线条，出现异常。

Error: attribute d: Expected number...

xLable 值未转换为线路路径？

var	elementid = "#linechart";
var margin = {top: 10, right: 30, bottom: 90, left: 30};
var width = $(elementid).innerWidth()  - (margin.left + margin.right);
var height = $(elementid).innerHeight() - (margin.top + margin.bottom);

var	data = [{xLabel: "00:30:00", yLabel: 50},
    {xLabel: "04:00:20", yLabel: 12},
    {xLabel: "10:00:00", yLabel: 10},
    {xLabel: "14:20:00", yLabel: 5},
    {xLabel: "15:30:10", yLabel: 11},
    {xLabel: "17:00:00", yLabel: 12},
    {xLabel: "19:00:00", yLabel: 30},
    {xLabel: "22:00:00", yLabel: 25}];

var x = d3.time.scale()
.nice(d3.time.day)
.range([0, width - margin.left - margin.right]);

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

var xAxis = d3.svg.axis().scale(x)
      .ticks(d3.time.hours,1).tickFormat(d3.time.format("%H:%M:%S"));

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var svg = d3.select(elementid)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", function (d) {
    return "rotate(-65)"
  });		

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

  // Define the line
  var valueline = d3.svg.line()
    .x(function (d) {
    return x(d.xLabel);
  })
    .y(function (d) {
    return y(d.yLabel);
  });

  // Add the valueline path.
  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));

html,body { width:100%; height:100%; margin:none; padding:none; }
#linechart { width:95%; height:95%; margin:none; padding:none; }

path {
     stroke: steelblue;
     stroke-width: 2;
     fill: none;
 }
 .axis path, .axis line {
     fill: none;
     stroke: grey;
     stroke-width: 1;
     shape-rendering: crispEdges;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="linechart" />

Answer 1

因此您数据中的xLabel格式不正确。您必须将字符串解析为日期格式。

 data.forEach(function(d) {
      d.xLabel = d3.time.format("%H:%M:%S").parse(d.xLabel);
      d.yLabel = d.yLabel;
 });

我稍微改变了这一行(基于 dealing with dates on d3.js axis )

var x = d3.time.scale().domain([data[0].xLabel, data[7].xLabel]).range([0,  
    width - margin.left - margin.right]);

var	elementid = "#linechart";
var margin = {top: 10, right: 30, bottom: 90, left: 30};
var width = $(elementid).innerWidth()  - (margin.left + margin.right);
var height = $(elementid).innerHeight() - (margin.top + margin.bottom);

var	data = [{xLabel: "00:30:00", yLabel: 50},
    {xLabel: "04:00:20", yLabel: 12},
    {xLabel: "10:00:00", yLabel: 10},
    {xLabel: "14:20:00", yLabel: 5},
    {xLabel: "15:30:10", yLabel: 11},
    {xLabel: "17:00:00", yLabel: 12},
    {xLabel: "19:00:00", yLabel: 30},
    {xLabel: "22:00:00", yLabel: 25},
    {xLabel: "23:30:00", yLabel: 25}];

 data.forEach(function(d) {
      d.xLabel = d3.time.format("%H:%M:%S").parse(d.xLabel);
      d.yLabel = d.yLabel;
 });
 
 var startDate = d3.time.format("%H:%M:%S").parse("00:00:00");
  
  var endDate = d3.time.format("%H:%M:%S").parse("23:00:00");
  
var x = d3.time.scale().domain([startDate, endDate]).range([0,  width - margin.left - margin.right]);

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

var xAxis = d3.svg.axis().scale(x)
      .ticks(d3.time.hours,1).tickFormat(d3.time.format("%H:%M:%S"));

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var svg = d3.select(elementid)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", function (d) {
    return "rotate(-65)"
  });		

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

  // Define the line
  var valueline = d3.svg.line()
    .x(function (d) {
    return x(d.xLabel);
  })
    .y(function (d) {
    return y(d.yLabel);
  });

  // Add the valueline path.
  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));

html,body { width:100%; height:100%; margin:none; padding:none; }
#linechart { width:95%; height:95%; margin:none; padding:none; }

path {
     stroke: steelblue;
     stroke-width: 2;
     fill: none;
 }
 .axis path, .axis line {
     fill: none;
     stroke: grey;
     stroke-width: 1;
     shape-rendering: crispEdges;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="linechart" />