Javascript D3-从JSON创建功能集

我有一个geojson，其中一些功能具有line属性。我想为每个特征创建一个具有直线特性的圆，并根据它所属的直线设置其cy属性，例如value=“u1”设置为50，value=“u2”设置为100。这就是我目前所拥有的。我不能过滤的内容，以实现这一点

d3.json("stations.json", function(error, stations) {
  if (error) return console.warn(error);

  var vis = d3.select("#network").append("svg")
    .attr("width", w)
    .attr("height", h);

    vis.selectAll("circle")
        .data(stations.features)
      .enter().append("circle")
        .attr("cy", ?? )
        .attr("cx", function(d, i) { return i * 100 + 30; })
        .attr("r", 10 )
        .text(function(d){ return d.properties.title;});

})

Geojson：

{
"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "Warschauer Str",
        "popupContent": "x",
        "line": "u1",
        "id": "13"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.448721,
          52.505889
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Schlesisches Tor",
        "popupContent": "x",
        "line": "u1",
        "id": "12"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.442426,
          52.501255
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Gorlizter Bahnhof",
        "popupContent": "x",
        "line": "u1",
        "id": "11"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.425292,
          52.4987404
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Kottbuster Tor",
        "popupContent": "x",
        "line": "u1",
        "id": "10"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.417748,
          52.499047
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Prinzenstrasse",
        "popupContent": "x",
        "line": "u1",
        "id": "9"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.406531,
          52.498274
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Hallesches Tor",
        "popupContent": "x",
        "line": "u1",
        "id": "8"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.39176,
          52.497774
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Mockernbrucke",
        "popupContent": "x",
        "line": "u1",
        "id": "7"

      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.383256,
          52.498944
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Gleisdreieck",
        "popupContent": "x",
        "line": "u1",
          "id": "6"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.374293,
          52.499587
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Kurfurstenstr",
        "popupContent": "x",
        "line": "u1",
          "id": "5"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.362814,
          52.49981
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Nollendorfplatz",
        "popupContent": "x",
        "line": "u1",
          "id": "4"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.353825,
          52.499644
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Wittenbergplatz",
        "popupContent": "x",
        "line": "u1",
          "id": "3"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.342561,
          52.502109
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Kurfurstendamm",
        "popupContent": "x",
        "line": "u1",
          "id": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.331419,
          52.503763
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Uhlandstrasse",
        "popupContent": "x",
        "line": "u1",
          "id": "1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.326233,
          52.502742
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Ruhleben",
        "popupContent": "x",
        "line": "u2",
          "id": "1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.241902,
          52.525587
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Olympia-Stadion",
        "popupContent": "x",
        "line": "u2",
          "id": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.2505,
          52.517048
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "green",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "title": "u1"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            13.448810577392578,
            52.50613909894946
          ],
          [
            13.442459106445312,
            52.50122797169364
          ],
          [
            13.425207138061523,
            52.499033460891084
          ],
          [
            13.406667709350586,
            52.49835418534738
          ],
          [
            13.383407592773438,
            52.49924246663935
          ],
          [
            13.374481201171875,
            52.499817227323945
          ],
          [
            13.362979888916016,
            52.50002622934633
          ],
          [
            13.354053497314453,
            52.499817227323945
          ],
          [
            13.342294692993164,
            52.502325186017565
          ],
          [
            13.331737518310547,
            52.50394483330318
          ],
          [
            13.326072692871094,
            52.50279541234477
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#ff0000",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "title": "u2"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            13.24247360229492,
            52.52624809700062
          ],
          [
            13.250541687011719,
            52.517683311303244
          ]
        ]
      }
    }
  ]
}

---

对于定位，我认为一些非常简单的方法可行（假设只有第一个字符是非数字）：

当然，当代码遇到未定义的行属性时，这将抛出一个错误。您可以使用以下方法进行过滤：

  .enter().append("circle")
    .filter(function(d) { return (d.properties.line);  })
    .attr("cy", function(d, i) { return d.properties.line.substring(1) * 40; })

总的来说，这提供了类似（在x轴上稍微修改定位模式以允许小片段视图）的内容：

var站={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“标题”：“沃沙尔街”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“13”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.448721,
52.505889
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“石勒教托尔”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“12”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.442426,
52.501255
]
}
},
{
“类型”：“功能”，
“财产”：{
“头衔”：“Gorlitter Bahnhof”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“11”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.425292,
52.4987404
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Kottbuster Tor”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“10”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.417748,
52.499047
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Prinzenstrase”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“9”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.406531,
52.498274
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Hallesches Tor”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“8”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.39176,
52.497774
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Mockernbrucke”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“7”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.383256,
52.498944
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Gleisdreieck”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“6”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.374293,
52.499587
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Kurfurstenstr”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“5”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.362814,
52.49981
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Nollendorfplatz”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“4”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.353825,
52.499644
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“维滕伯格广场”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“3”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.342561,
52.502109
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Kurfurstendamm”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“2”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.331419,
52.503763
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“Uhlandstrasse”，
“popupContent”：“x”，
“行”：“u1”，
“id”：“1”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.326233,
52.502742
]
}
},
{
“类型”：“功能”，
“财产”：{
“头衔”：“鲁勒本”，
“popupContent”：“x”，
“行”：“u2”，
“id”：“1”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.241902,
52.525587
]
}
},
{
“类型”：“功能”，
“财产”：{
“标题”：“奥林匹亚体育场”，
“popupContent”：“x”，
“行”：“u2”，
“id”：“2”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
13.2505,
52.517048
]
}
},
{
“类型”：“功能”，
“财产”：{
“笔划”：“绿色”，
“笔划宽度”：2，
“笔划不透明度”：1，
“标题”：“u1”
},
“几何学”：{
“类型”：“行字符串”，
“坐标”：[
[
13.448810577392578,
52.50613909894946
],
[
13.442459106445312,
52.50122797169364
],
[
13.425207138061523,
52.499033460891084
],
[
13.406667709350586,
52.49835418534738
],
  .enter().append("circle")
    .filter(function(d) { return (d.properties.line);  })
    .attr("cy", function(d, i) { return d.properties.line.substring(1) * 40; })

  var stationsArr = stations.features.filter(function(d) {
        return d.properties.line;
    });
    var lines = stationsArr.map(function(x) {
        return x.properties.line;
    });
    var uniqueLines = unique(lines);

    function unique(arr) {
        var u = {},
            a = [];
        for (var i = 0, l = arr.length; i < l; ++i) {
            if (!u.hasOwnProperty(arr[i])) {
                a.push(arr[i]);
                u[arr[i]] = 1;
            }
        }
        return a;
    }

    function getX(d) {
        return d.properties.id * 50;
    }

    function getY(d) {
        var line = d.properties.line;
        var i = uniqueLines.indexOf(line) + 1;
        return i * 150;
    }

    stationGroup.selectAll("circle")
        .data(stationsArr)
        .enter().append("circle")
        .attr("class", "station")
        .attr("cx", function(d) {
            return getX(d);
        })
        .attr("cy", function(d) {
            return getY(d);
        })
        .attr("r", 10)
        .style("fill", "green")
        .text(function(d) {
            return d.properties.title;
        });