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要素类。每个公园都有很多属性，但我似乎无法访问它们？我可以do this with regular Javascript但似乎无法用这个脚本中的D3来解决这个问题。使用D3对我来说是如此新鲜......我不确定如何访问每个Park的NAME或FACILITYID字段...我想在HEAD元素中使用DRAW功能，但是现在我被困在Console中。记录所有内容以试图弄清楚这一切。

Answer 1

在发布这些问题之后，Stack Exchange立即建议我跟随https://www.dashingd3js.com/d3-examples/1-d3-and-javascript-working-with-json的链接，这让我开始思考另一个方向。

所以我尝试了以下调整和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>

它就像一个魅力。现在我只需调整绘图功能即可完成此测试运行。

如何在DSON

1 个答案: