var width = 500,
    height = 250,
    margin = {left: 50, top: 30, right: 20, bottom: 20},
    g_width = width - margin.left - margin.right,
    g_height = height - margin.top - margin.bottom;


// 类似jq的链式调用
// 制作图中的线条
var svg = d3.select('#container')
    .append("svg:svg")
    // width,height
    .attr('width', width)//attribute
    .attr('height', height);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [1, 3, 5, 7, 8, 4, 3, 7];

// 放大
var scale_x = d3.scaleLinear()
    .domain([0, data.length - 1])
    .range([0, g_width]);

var scale_y = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([g_height, 0]);// 切换坐标轴的朝向

var line_generator = d3.line()
    .x(function (d, i) {
        // d代表数据
        // i代表下标
        return scale_x(i);
    })
    .y(function (d) {
        return scale_y(d);
    })
    .curve(d3.curveCatmullRom.alpha(0.5));
g.append('path').attr('d', line_generator(data));


// 制作坐标轴
var x_axis = d3.axisBottom(scale_x),
    y_axis = d3.axisLeft(scale_y);

g.append("g").call(x_axis)
    .attr("transform", "translate(0," + g_height + ")");

g.append("g").call(y_axis)
    .append("text").text("Price($)") // 设置单位等
    .attr("transform", "rotate(-90)") // 定位
    .attr("text-anchor", "end")
    .attr("dy", "1em");

#container {
  background: #ddd;
  width: 500px;
  height: 250px;
}
path {
  fill: none;
  stroke: #4682B4;
  stroke-width: 2;
}
text {
  fill: #000;
}
.domain,
.tick line {
  stroke: gray;
}