D3：从 json 数据中选择路径时遇到问题答案

【问题标题】：D3: Having trouble selecting a path from json dataD3：从 json 数据中选择路径时遇到问题
【发布时间】：2016-12-02 06:33:24
【问题描述】：

尽管阅读了其他人就此事发布的许多问题和答案，但我在为来自外部 json 坐标文件的路径分配 ID 时遇到问题。文件中的数据是这样的（在我的html的头部也有引用，见下文）：

var neighborhoods_json = {
"type": "FeatureCollection",                                                                                
"features": [
{ "type": "Feature", "properties": { "Name": "Roslindale", "density": 5.5800 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.1259, 42.2720 ], [ -71.1257, 42.2723 ], [ -71.1256, 42.2724 ], [ -71.1255, 42.2725 ],....

我看到其他人问过同样的问题，答案是添加这一行来为每个路径创建 id：

 .attr("id", function(d) {return d.id;})

但我的json 数据不包含id，所以我想我会改用Name：

 .attr("id", function(d) {return d.Name;})

然后我尝试选择创建的路径之一，使用Name 作为id。这个想法是简单地选择其中一条路径，然后将其填充颜色更改为红色。但我要么没有正确分配 ID，要么没有正确选择路径。谁能告诉我我做错了什么？

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://maptimeboston.github.io/d3-maptime/example3/neighborhoods.js"></script>
</head>
<body>
    <script>
        var width = 700,
            height = 580;

        var svg = d3.select( "body" )
          .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );

        var neighborhoods = svg.append( "g" );

        var albersProjection = d3.geo.albers()
          .scale( 190000 )
          .rotate( [71.057,0] )
          .center( [0, 42.313] )
          .translate( [width/2,height/2] );

        var geoPath = d3.geo.path()
          .projection( albersProjection );

        neighborhoods.selectAll( "path" )
          .data( neighborhoods_json.features )
          .enter()
          .append("path")
            .attr( "d", geoPath)
            .attr("id", function(d) {return d.Name;})
            .attr("fill", "steelblue");

        neighborhoods.select("path#Roslindale")
            .attr("fill", "red");

    </script>

【问题讨论】：

标签： javascript json d3.js path

【解决方案1】：

在 id 函数中，Name 属性嵌套在 properties 属性中

neighborhoods.selectAll( "path" )
          .data( neighborhoods_json.features )
          .enter()
          .append("path")
            .attr( "d", geoPath)
            .attr("id", function(d) {return d.properties.Name;})
            .attr("fill", "steelblue");

Working jsfiddle

【讨论】：