1. 首页
  2. 问答
  3. D3 - 从JSON创建一组功能

D3 - 从JSON创建一组功能

2017-03-04 50 views
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 
      ] 
     ] 
     } 
    } 
    ] 
}

来源

2017-03-04 Robatron

回答

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; 
     });

来源

2017-03-04 23:29:02 Robatron

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语句的内联函数在两种类型之间切换。

来源

2017-03-04 02:16:51

+0

你把我推向了正确的方向安德鲁！我使用了array.prototype.filter（）而不是d3.filter（），d3.filter（）向svg添加了空圈元素来表示不匹配的项目。看到我的完整答案。谢谢 – Robatron

相关问题

 相关问题