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

Source: Internet
Author: User

[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> 


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.