1
私はgeojsonを持っていますが、いくつかのフィーチャにはラインプロパティがあります。私は、ラインプロパティを持つ各フィーチャの円を作成し、それが属している行に応じてcy属性を設定したいとします。たとえば、value = "u1"を50に設定し、value = "u2"を100に設定します。これまでのところあります。私はこれを達成するためにコンテンツをフィルタリングできません！D3 - JSONからフィーチャのセットを作成
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
]
]
}
}
]
}
あなたは正しい方向に私をプッシュアンドリュー！ d3.filter（）ではなくarray.prototype.filter（）を使用しました.d3.filter（）は、一致していない項目の空の円要素をsvgに追加します。私の完全な答えを見てください。ありがとう – Robatron