1. 首頁
  2. 問答
  3. D3 - 從JSON創建一組功能

D3 - 從JSON創建一組功能

2017-03-04 35 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

相關問題

 相關問題