上記ポイントを押さえて、通常のd3.jsチャート作成方法で折れ線チャートを作成します
var data_set = [
{date:"2017-1-1", val:16},
{date:"2017-1-2", val:6},
{date:"2017-1-3", val:1},
{date:"2017-1-4", val:5},
{date:"2017-1-5", val:26},
{date:"2017-1-6", val:36},
{date:"2017-1-7", val:10},
{date:"2017-1-8", val:8},
{date:"2017-1-9", val:21},
{date:"2017-1-10", val:26},
{date:"2017-1-11", val:19},
{date:"2017-1-12", val:20},
] ;
var timeparser = d3.timeParse("%Y-%m-%e");
data_set = data_set.map( function(d){
return { date: timeparser(d.date), val:d.val } ;
} );
var width=500, height=200 ;
var x_scale = d3.scaleTime()
.domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] )
.range([0, width]);
var y_scale = d3.scaleLinear()
.domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ])
.range([height, 0]);
var valueline = d3.line()
.x(function(d) { return x_scale(d.date); })
.y(function(d) { return y_scale(d.val); })
;
var line_svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 300)
;
line_svg.append( "path" )
.attr("transform", "translate(40, 20)")
.datum(data_set)
.attr("d", valueline)
.attr("fill","none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
;
line_svg.append("g")
.attr("transform", "translate(40,"+(height+20)+")")
.call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")))
;
line_svg.append("g")
.attr("transform", "translate(40,20)")
.call(d3.axisLeft(y_scale))
;