[D3.js data visualization practices] -- (1) Draw gridlines and d3.js Grids

[D3.js data visualization practices] -- (1) Draw gridlines and d3.js Grids

We often use regular charts (histograms, line charts, and so on) to present data. To clearly indicate which value range of the data on the number axis, the value is directly indicated in the rectangle and point.

In addition to this method, you can also use a grid with pale tones as the background reference.

This article describes how to use D3 to draw gridlines:

 

Rendering effect:

 

The idea is simple:

1. Draw an SVG container.

2. Group SVG and set the style class of the group.

3. Add a horizontal line and a vertical line to the group.

 

Key Technology Introduction (1) generate an array of 10 elements:

(2) define the x and y scales

x = d3.scale.linear().domain([0,1]).range([p, w - p])

X-ray scale maps array values to actual pixel values, for example:

(3) drawing SVG

var svg = d3.select("body").append("svg")   .attr("width", w).attr("height",h);

 

(4) add groups to SVG and set style classes

var grid = svg.selectAll(".grid")   .data(x.ticks(10)) .enter().append("g")   .attr("class", "grid");

 

(5) add a line

grid.append("line")   .attr("x1", x)   .attr("x2", x)   .attr("y1", p)   .attr("y2", h - p - 1);…

 

This example is very simple. You can use the following code to test the effect. have you learned?

Complete code:

<! DOCTYPE html>