D3.js Study notes

May 19, 2017 00:00 · 427 words · 3 minutes read visualization

D3 : emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary Framework, combining thermal visualization components and a data-driven approach to DOM manipulation.

First, the element selection

The usual procedure is as follows:

var div = document.createElement("div");
div.innerHTML = "Hello, world!";
document.body.appendChild(div);

By using the D3.js selector program as shown below (web full code):

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body>
<script>

var body = d3.select("body");
var div = body.append("div");
div.html("Hello, world!");

</script>
</body>

Among them, d3.select the element body can be replaced by many other elements.

Second, the transformation method

Selection.attr returns the current selection, and selection.append returns a new content. Here are some examples:

Change the body style

var body = d3.select("body");
body.style("color", "black");
body.style("background-color", "white");

Add a new div (section need to be defined in the style sheet)

d3.selectAll("section")
	.attr("class", "special")
  .append("div")
	.html("Hello, world!");

Third, the manual code table

<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

Four, automatic code table

Assuming that we have defined the chart style, the code is as follows:

d3.select(".chart")
  .selectAll("div")
	.data(data)
  .enter().append("div")
	.style("width", function(d) { return d * 10 + "px"; })
	.text(function(d) { return d; });

Select is the selected chart block, and selectAll is selected in the chart in the existing and after the possible div, data is used for data binding, enter (). Append () is not present for the elements to add div, style Is set to display the length of the text is set to display the text content.

In order to make the bar length of the fit, we can set a range, so that the data according to their own size to deal with. The length of the x-axis is set as follows:

var x = d3.scale.linear()
	.domain([0, d3.max(data)])
	.range([0, 420]);

The code for automatically filling the length is as follows:

d3.select(".chart")
  .selectAll("div")
	.data(data)
  .enter().append("div")
	.style("width", function(d) { return x(d) + "px"; })
	.text(function(d) { return d; });

The total code is as follows:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
	.domain([0, d3.max(data)])
	.range([0, 420]);

d3.select(".chart")
  .selectAll("div")
	.data(data)
  .enter().append("div")
	.style("width", function(d) { return x(d) + "px"; })
	.text(function(d) { return d; });

</script>