Introduction to how to create tables using D3.js

D3 is currently one of the most popular JavaScript visual chart libraries. D3 has a very rich chart type and supports SVG format, so it is widely used. There are also many chart plug-ins developed based on D3, such as MetricsGraphics.js, built on D3 Data charts are very powerful.

D3 is a Javascript library for data visualization. Use SVG, Canvas and HTML. Combines powerful visualization techniques with a data-driven approach to DOM manipulation.

The difference between D3 and JQuery D3 is data-driven, JQuery is not: we use JQuery to directly manipulate elements; but when using D3
we need to use D3's proprietary data(), enter() and exit The () method provides data and callbacks, and then D3 operates on the elements. D3 is commonly used for data visualization; JQuery is used for creating web applications. There are many data visualization extensions for D3; there are many web application plug-ins for JQuery. Both are Javascript DOM manipulation libraries that provide CSS selectors and fluent APIs.

What is the difference between D3 and JQuery?

The most commonly used method

d3.select(selector): Select the first element that matches the selector. If there are no matching elements, return an empty selection (but not null or undefined).

d3.selectAll(selector): Different from select(), all matching elements will be selected.

selection.append(type): If the specified type is a string, append this type (tag name) as a new element to the last child element of each selected element.

selection.attr(name, [value]): When the value is determined, set the attribute value named name in the selection to value. value can be a constant or a method. If value is not given, returns the current value of the name attribute of the first non-empty element in the selection.

selection.data([data[,key]]): Bind data and elements and return a new selection.

selection.enter(): Returns enter selection. At this time, the DOM elements are less than the corresponding data. Used to add missing DOM elements. For example:

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

If the body is empty, the above code will create a new p element based on the data, then add it to the body element, and set the text content to the corresponding number. The page results are as follows:

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit(): Returns exit selection. At this time, there are more DOM elements than corresponding data. Used to remove redundant DOM elements. For example, based on the above example, we want to update the data:

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; } );

Because the key method is specified at this time (used to specify the order of data and element matching, etc.), and the data [4,8,16] matches existing elements, so update selection only Contains 3 p elements. We can add 3 new elements using enter selection:

p.enter().append("p").text(function(d) { return d; });

Then, you need to remove unnecessary elements [15, 23, 42]:

p.exit().remove();

Page results:

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

Making histogram

##Bar chart example

Using D3 At this time, you need to have an understanding of the structure of SVG. What graphics are to be drawn, what labels need to be used, and what attributes need to be defined for the labels.

For example, make a histogram, mainly XY coordinate axes and columns. The XY axis uses the line label to draw a straight line, and the text label to display the text of the scale. The column uses the rect tag to draw a rectangle. If we want a rectangle with rounded corners, we can set the rx or ry attributes of the rect tag. If we want to define the position of the rectangle, we need to set the x and y attributes, etc. In this way, parts are combined together to form a picture.

The following content is based on the API of D3 3.x. Some interfaces are different from D3 4.0.

D3 3.x API Reference
D3 4.0 API Reference

root svg

D3 drawing must first create an svg element and define it Attributes such as width and height:

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

Coordinate axis

To make the coordinate axis, you first need to use the D3 scale. Use the method axis.scale([scale]) to set the scale of the coordinate axis, or return the current scale. The scale is divided into:

Quantitative scale: continuous data, such as numbers. Time scale: Data is time. Ordinal scale: discrete data, such as name, category, etc.

For example, if we want to make an X-axis with a time scale and a Y-axis with a numerical scale, we can use a time scale and a quantitative scale, or more specifically, a linear scale.

d3.scale.linear(): Create a linear scale. d3.time.scale(): Create a time scale. The ticks and tick format are configured for local time.

After determining the scale, you need to set the input domain and output range. For example, the scale of an x-axis is:

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

The minimum date and maximum date are both Date objects. Then set the scale of the .

tickFormat allows us to customize the text format of the tick.

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

The above is the detailed content of Introduction to how to create tables using D3.js. For more information, please follow other related articles on the PHP Chinese website!