如何訪問 D3 的 JSON 中的子對象

Question

所以我試圖從多個教程中學習 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 要素類。 每個公園都有許多屬性，但我似乎無法訪問它們？ 我可以用普通的 Javascript來做到這一點，但似乎無法在這個腳本中用 D3 解決這個問題。 使用 D3 對我來說是如此新鮮......我不確定如何訪問每個公園的 NAME 或 FACILITYID 字段......我想在 HEAD 元素中使用 DRAW 函數，但現在我被困在控制台。記錄所有內容以嘗試解決所有問題。

Answer 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 函數來完成這個測試運行。

如何訪問 D3 的 JSON 中的子對象

問題描述

1 個解決方案

解決方案1
1 2016-03-31 15:24:46

如何訪問 D3 的 JSON 中的子對象

問題描述

1 個解決方案

解決方案1 1 2016-03-31 15:24:46

解決方案1
1 2016-03-31 15:24:46