x軸とデータに時間範囲があるときに線グラフにデータを入力する方法

Question

x軸のフォーマットが%H:%M:%Sで、時間が1時間のd3を使用して線グラフを作成する必要があります。私はd3.svg.lineを使ってグラフ上に線を描画しています。 X軸とY軸の両方が正しくプロットされていますが、線は描画されず、例外が発生します。

Error: attribute d: Expected number...

xLableの値はラインパスに変換されませんか？

var \t 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 \t 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)" 
 
    }); \t \t 
 

 
    // 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 \t 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 \t 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)" 
 
    }); \t \t 
 

 
    // 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" />