如何在 JSON 中访问 D3 中的子对象答案

【问题标题】：How to access sub-objects in JSON for D3如何在 JSON 中访问 D3 中的子对象
【发布时间】：2016-07-20 03:24:21
【问题描述】：

所以我正在尝试从多个教程中学习 D3。我有以下代码：

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

数据是公园的 ESRI 要素类。每个公园都有许多属性，但我似乎无法访问它们？我可以do this with regular Javascript 但似乎无法在此脚本中使用 D3 解决此问题。使用 D3 对我来说太新了……我不确定如何访问每个公园的 NAME 或 FACILITYID 字段……我想在 HEAD 元素中使用 DRAW 功能，但现在我被卡住了控制台。记录一切以试图弄清楚这一切。

【问题讨论】：

那么，您想将什么值传递给draw？ json?应该是json.features。
This answer 可能对你有帮助。
@Omarjmh 这个代码/问题的全部目的是因为我正在尝试学习 D3。我已经知道如何在 Javascript 中做到这一点，事实上我在我的原始问题中引用了它，并提供了一个使用 vanilla JS 的工作示例的链接。我想学习 D3，我正在尝试使用我每天使用的数据来做到这一点。不过还是谢谢。

标签： javascript json d3.js esri

【解决方案1】：

因此，在发布此问题后，Stack Exchange 立即向我推荐了一个指向 https://www.dashingd3js.com/d3-examples/1-d3-and-javascript-working-with-json 的链接，这让我开始思考不同的方向。

所以我尝试了以下调整，瞧！

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

它就像一个魅力。现在我只需要调整 draw 函数来完成这个测试运行。

【讨论】：