Since our end goal is to generate data-driven documents, we need to connect our elements to data. Let's look at an example.
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var d = ["Hello"," There","!"];
d3.select("body")
.selectAll("div")
.data(d)
.enter()
.append("div")
.text(function(d){ return d});
</script>
</body>
</html>
See in Plunker - Example 3.1
Let's break down the script:
// We declare an array of strings
var d = ["Hello"," There","!"];
// Select the body element
d3.select("body")
// Now we do a subselection of DIVs inside the body
// There are none! But an empty group is created
.selectAll("div")
// The data() method binds the array to the current selection
// (grouped under the previous selection) and lets us operate
// on that data set
.data(d)
// The enter() method gives us back a selection of data points
// that are "entering", that do not exist and need something
// done to create them. This is based of an index and if we do
// not specify one, the count of data elements vs the count of
// items in the selection is used. So there are 3 items in
// the enter() selection
.enter()
// For each one we append a div under the parent selection
.append("div")
// For each DIV we set the text. See note below about this
// function.
.text(function(d){ return d});
As you see in the last line of this example, rather than set a static value for the text, we created an inline method. When we are setting values on bound data like this, we can create a method that gets the current data element (in this case we called it d) and we can operate on it, then return it as we please. The return value of this method will be what is set. So for the 3 elements in this example, each is passed into the inline method and then returned right back out. We could alter it if we wanted, or if it were a more complex object, we could grab just a part of it. Here is an example of what that might look like.
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var d = [
{"name":"John","Age":22},
{"name":"Fred","Age":45},
{"name":"Ann","Age":32}
];
d3.select("body")
.selectAll("div")
.data(d)
.enter()
.append("div")
.text(function(d){ return d.name});
</script>
</body>
</html>
View on Plunker - Ex 3.2
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var d = ["Hello"," There","!"];
d3.select("body")
.selectAll("div")
.data(d)
.enter()
.append("div")
.text(function(d){ return d});
</script>
</body>
</html>
See in Plunker - Example 3.1
Let's break down the script:
// We declare an array of strings
var d = ["Hello"," There","!"];
// Select the body element
d3.select("body")
// Now we do a subselection of DIVs inside the body
// There are none! But an empty group is created
.selectAll("div")
// The data() method binds the array to the current selection
// (grouped under the previous selection) and lets us operate
// on that data set
.data(d)
// The enter() method gives us back a selection of data points
// that are "entering", that do not exist and need something
// done to create them. This is based of an index and if we do
// not specify one, the count of data elements vs the count of
// items in the selection is used. So there are 3 items in
// the enter() selection
.enter()
// For each one we append a div under the parent selection
.append("div")
// For each DIV we set the text. See note below about this
// function.
.text(function(d){ return d});
As you see in the last line of this example, rather than set a static value for the text, we created an inline method. When we are setting values on bound data like this, we can create a method that gets the current data element (in this case we called it d) and we can operate on it, then return it as we please. The return value of this method will be what is set. So for the 3 elements in this example, each is passed into the inline method and then returned right back out. We could alter it if we wanted, or if it were a more complex object, we could grab just a part of it. Here is an example of what that might look like.
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var d = [
{"name":"John","Age":22},
{"name":"Fred","Age":45},
{"name":"Ann","Age":32}
];
d3.select("body")
.selectAll("div")
.data(d)
.enter()
.append("div")
.text(function(d){ return d.name});
</script>
</body>
</html>
View on Plunker - Ex 3.2
Comments
Post a Comment