我有一个geojson，其中一些功能具有线属性。我想为每个要素创建一个带有线属性的圆，并根据它所属的行设置其cy属性，例如value =＆＃34; u1＆＃34;设置为50，值=＆＃34; u2＆＃34;设置为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
]
]
}
}
]
}
答案 0 :(得分：1)
对于定位，我会做一些相当简单的事情（假设只有第一个字符是非数字的）：
.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轴上稍微修改你的定位模式以允许小片段视图）：
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语句的内联函数在两种类型之间切换。
答案 1 :(得分：0)
我不想依赖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;
});