我有一个 geojson，其中某些功能具有线属性。我想为每个具有线属性的要素创建一个圆，并根据它所属的线设置其 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
]
]
}
}
]
}
最佳答案
对于定位，我可以使用一些相当简单的方法(假设只有第一个字符是非数字):
.attr("cy", function(d, i) { return d.properties.line.substring(1) * 40; })
当然，当代码遇到未定义的行属性时，这会引发错误。您可以使用以下内容进行过滤:
.enter().append("circle")
.filter(function(d) { return (d.properties.line); })
.attr("cy", function(d, i) { return d.properties.line.substring(1) * 40; })
总的来说，这给出了类似的东西(在x轴上稍微修改你的定位模式以允许小片段 View ):
var stations = {
"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
]
]
}
}
]
};
var w = 500,
h = 300;
var vis = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
vis.selectAll("circle")
.data(stations.features)
.enter().append("circle")
.filter(function(d) { return (d.properties.line); })
.attr("cy", function(d, i) { return d.properties.line.substring(1) * 40; })
.attr("cx", function(d, i) { return i * 10 + 30; })
.attr("r", 10 )<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>如果您希望对 d.properties.line 定义和未定义的位置有两种定位方案，则可以使用带有 if 语句的内联函数在两种类型之间切换。
关于javascript - D3 - 从 JSON 创建特征集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42591089/