How to access sub-objects in JSON for D3
Question
So I'm trying to learn D3 from multiple tutorials. I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
function draw(data)
{
"use strict";
console.log("test");
console.log(data);
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) { return d.NAME + ": " + d.FACILITYID; });
}
</script>
</head>
<body>
<script>
d3.json("http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=NAME&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&f=json",
function(error,json)
{
if(error) return console.warn(error);
data = json;
console.log(data);
}
);
</script>
</body>
</html>
The data is ESRI Feature Classes for Parks. Each park has a slew of attributes but I can't seem to access them? I can do this with regular Javascript but can't seem to figure this out with D3 in this script. Working with D3 is so new to me... I'm unsure how to access the NAME or FACILITYID field of each Park... I would LIKE to use the DRAW function in the HEAD elements, but for now I am stuck Console.Log-ging everything to try to figure this all out.
1 answers
solution1
1 2016-03-31 15:24:46
So immediately after posting this questions, Stack Exchange suggested a link that I followed to https://www.dashingd3js.com/d3-examples/1-d3-and-javascript-working-with-json which made me start thinking in a different direction.
So I tried the following adjustments and VOILA!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
function draw(data)
{
"use strict";
console.log("test");
console.log(data);
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) { return d.attributes.NAME + ": " + d.attributes.FACILITYID; });
}
</script>
</head>
<body>
<script>
d3.json("http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=NAME&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&f=json",
function(error,json)
{
if(error) return console.warn(error);
data = json;
draw(data.features);
}
);
</script>
</body>
</html>
It works like a charm. Now I just have to tweak the draw function to finish off this test run.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.