D3.js – Line chart

Line chart is commonly used in data statistics and is used to display two-dimensional data. This paper will use D3 to make a simple line chart

Make sure the data

The table data is the sales volume of a store in one year

var dataset = [[1.224], [2.528], [3.756], [4.632], [5.582], [6.704],
              [7.766], [8.804], [9.884], [10.960], [11.1095], [12.1250]].Copy the code

To find the maximum and minimum values, use D3’s array method

• D3.min (array[,accessor]) returns the minimum value in the array
• D3. Max (array[,accessor]) returns the maximum value in the array

The accessor is a method called before the min or Max function is executed. Because the dataset is a two-dimensional array, it needs to return the second value in the subarray after each array is retrieved. It can obtain the maximum and minimum values of sales from January to December

var min = d3.min(dataset, function(d) {
  return d[1];
})
var max = d3.max(dataset, function(d) {
  return d[1];
})
Copy the code

I also need some basic data for drawing

// The width and height of the chart
var width = 600;
var height = 600;
// The distance reserved for the axis
var padding = { top: 50.right: 50.bottom: 50.left: 50 };
Copy the code

Set the scale

Due to the limited size of the canvas and large data values, line charts usually use linear scale, with the distance on the canvas to represent the quantized value in the chart

• D3.scalelinear () sets a linear scale
• Quantize.domain ([domain]) gets or sets the scale domain
• Quantize.range ([range]) gets or sets the range of values for the scale

In the X-axis, the data is from January to December, and the corresponding distance on the canvas is the width of the canvas minus the space between the left and right. In the Y-axis, the range of values is reversed, because the zero of the Y-axis is at the bottom, and the scale increases from the bottom up

var xScale = d3.scaleLinear()
              .domain([1.12])
              .range([0, width - padding.left - padding.right]);
var yScale = d3.scaleLinear()
              .domain([0, max])
              .range([height - padding.top - padding.bottom, 0]);
Copy the code

Draw the axis

• D3. axisBottom(Scale) creates a new axis generator
• D3.axisbottom (scale).scale([scale]) sets or gets the scale

Once you have the scale you can draw the axis, create the scale, and call the scale you just set

var svg = d3.select('body')
            .append('svg')
            .attr('width', width + 'px')
            .attr('height', height + 'px');
var xAxis = d3.axisBottom()
              .scale(xScale);
var yAxis = d3.axisLeft()
              .scale(yScale);
Copy the code

In SVG, you need a container to hold the axis, that is, load the g tag of the group, and call the axis generator in the G tag to generate the axis composed of SVG tags such as path, line, text, etc

svg.append('g')
  .attr('class'.'axis')
  .attr('transform'.'translate(' + padding.left + ', ' + (height - padding.bottom) + ') ')
  .call(xAxis);
svg.append('g')
  .attr('class'.'axis')
  .attr('transform'.'translate(' + padding.left + ', ' + padding.top + ') ')
  .call(yAxis);
Copy the code

The axis diagram drawn is shown below

Draw the curve

• D3.line () creates a new line generator
• Line.x ([x]) sets or gets the X-coordinate accessor
• Line.y ([y]) sets or gets the y-coordinate accessor

D3 to generate a variety of line segments, shapes, graphics, built in path generator, here need to use the line segment generator, and specify a two-dimensional accessor, call the scale set just now

var linePath = d3.line()
                .x(function(d){ return xScale(d[0]) })
                .y(function(d){ return yScale(d[1])});Copy the code

svg.append('g')
  .append('path')
  .attr('class'.'line-path')
  .attr('transform'.'translate(' + padding.left + ', ' + padding.top + ') ')
  .attr('d', linePath(dataset))
  .attr('fill'.'none')
  .attr('stroke-width'.3)
  .attr('stroke'.'green');
Copy the code

svg.append('g')
  .selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle')
  .attr('r'.5)
  .attr('transform'.function(d){
    return 'translate(' + (xScale(d[0]) + padding.left) + ', ' + (yScale(d[1]) + padding.top) + ') '
  })
  .attr('fill'.'green');
Copy the code

The resulting axis diagram is shown below

See the complete sample code