1回答

• 

  Nick_arron

  2017-08-15 14:41:02

  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;
  }

  
  

  0 0