我有一个 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
]
]
}
}
]
}
我不想依赖 line 属性来包含数值，所以我添加了额外的东西来减少这种依赖。
我将所有行名称提取到一个数组中，并使用数组中的序数位置来调出 cy 属性。
另外，我使用了 array.prototype.filter() 而不是 d3.filter()，d3.filter() 为不匹配的项目向 svg 添加了空圆元素。
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;
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句