geojson的D3條形圖
[英]D3 bar chart from geojson
問題描述
有沒有人在div對象內編寫程序化D3條形圖？
我正在為項目開發Web地圖（傳單）中的一系列圖層，而我在這一部分中苦苦掙扎。 我了解如何將D3對象發送到div的過程，而該div又被發送到彈出窗口中，但是圖表失敗。
一些上下文：數據位於帶有鏈接關系的geojson中。 我的目標是制作一個水平條形圖，其中每個單擊區域的變量（“ LabMarPres”，“ Educ”，“ Earnings”，“ Ind”，“ Housing”，“ AccToSer”，“ EcPerfInd”）都帶有一個條形圖。
我發現了許多帶有這樣的數據的圖表示例：“名稱”，“值”，但是沒有什么可以幫助我理解如何為一個區域名稱制作一個圖表，並為上述每個值添加一個橫條。
目的是在單擊時在彈出窗口中生成一個圖表。
我接近了，我能感覺到。 我在小提琴中創建了一個樣本。 感謝您為我設定正確方向的任何見解！
碼：
var Sample = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"OBJECTID": 83,
"Shape_Leng": 4.82699099667,
"Shape_Area": 0.448245392274,
"AreaName": "Area1",
"LabMarPres": 0.47,
"Educ": 0.56,
"Earnings": 0.34,
"Ind": 0.95,
"Housing": 0.71,
"AccToSer": 0.57,
"EcPerfInd": 0.48
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-65.21807503043829,
47.80747318893657
],
[
-65.12720779530349,
47.82663638466147
],
[
-65.04717558318657,
47.83306401469258
],
[
-65.03070994260975,
47.808330988384455
],
[
-65.07368063185561,
47.78446441480094
],
[
-65.32377354751117,
47.635343686761814
],
[
-65.17873639716697,
47.47216492916817
],
[
-65.29358005627455,
47.35396841221251
],
[
-65.81588402532748,
47.23253275488281
],
[
-66.21716123360403,
47.55064511288168
],
[
-66.16380385856121,
47.966750274705475
],
[
-65.73298300915849,
47.83039260553437
],
[
-65.61017728505362,
47.65390380431717
],
[
-65.21807503043829,
47.80747318893657
]
]
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 107,
"Shape_Leng": 5.09713294978,
"Shape_Area": 0.285706288115,
"AreaName": "Area2",
"LabMarPres": 0.39,
"Educ": 0.56,
"Earnings": 0.39,
"Ind": 0.84,
"Housing": 0.65,
"AccToSer": 0.53,
"EcPerfInd": 0.45
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-81.86826509136085,
49.58016077120266
],
[
-81.86738708234793,
49.31949724400266
],
[
-81.96549742666485,
49.058330969698545
],
[
-82.27583456731139,
49.320275585649824
],
[
-81.86826509136085,
49.58016077120266
]
]
],
[
[
[
-82.47671511650935,
49.58123795846507
],
[
-82.67823302333534,
49.45000960406003
],
[
-83.07798109635047,
49.44957771453994
],
[
-83.07752144116154,
49.580390592052254
],
[
-82.47671511650935,
49.58123795846507
]
]
]
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 162,
"Shape_Leng": 5.12799091297,
"Shape_Area": 0.610219990564,
"AreaName": "Area3",
"LabMarPres": 0.61,
"Educ": 0.61,
"Earnings": 0.44,
"Ind": 0.89,
"Housing": 0.58,
"AccToSer": 0.65,
"EcPerfInd": 0.53
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-80.81235205370427,
48.79754602502908
],
[
-80.4177094535284,
48.798039046864574
],
[
-80.27503105943583,
48.62345072447141
],
[
-80.27454603796923,
48.45013510824867
],
[
-80.017245116369,
48.27609909729557
],
[
-80.40460246423231,
48.27565976138891
],
[
-80.42081344738267,
48.450625616479044
],
[
-80.8131945574828,
48.450522225020734
],
[
-80.81279867681747,
48.27715668383394
],
[
-81.72681332037837,
48.27687831128509
],
[
-81.72739491914018,
48.7106311025434
],
[
-80.94382841594859,
48.71044270986323
],
[
-80.81235205370427,
48.79754602502908
]
]
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 168,
"Shape_Leng": 11.4173504124,
"Shape_Area": 1.58006615738,
"AreaName": "Area4",
"LabMarPres": 0.49,
"Educ": 0.54,
"Earnings": 0.33,
"Ind": 0.9,
"Housing": 0.7,
"AccToSer": 0.58,
"EcPerfInd": 0.47
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-65.29358005627455,
47.35396841221251
],
[
-64.88065039699819,
47.44903381755671
],
[
-65.01747251744268,
47.27788412225448
],
[
-65.26658863805517,
47.11635518624291
],
[
-65.16514421283512,
47.03860454516371
],
[
-65.14503370094451,
46.729783211825804
],
[
-65.38608821330035,
46.61004800700999
],
[
-65.58553702021726,
46.631193021640684
],
[
-65.85170667362405,
46.336452850218905
],
[
-66.16451905970678,
46.39648605738569
],
[
-66.50983720911984,
46.294016035411744
],
[
-66.62896209622374,
46.41230652882331
],
[
-66.68829103710164,
46.84285340695919
],
[
-67.0483476629143,
47.36288448253288
],
[
-66.21716123360403,
47.55064511288168
],
[
-65.81588402532748,
47.23253275488281
],
[
-65.29358005627455,
47.35396841221251
]
]
]
}
},
{
"type": "Feature",
"properties": {
"OBJECTID": 231,
"Shape_Leng": 7.79008441871,
"Shape_Area": 0.18922060249,
"AreaName": "Area5",
"LabMarPres": 0.41,
"Educ": 0.56,
"Earnings": 0.37,
"Ind": 0.9,
"Housing": 0.7,
"AccToSer": 0.53,
"EcPerfInd": 0.46
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-64.88065039699819,
47.44903381755671
],
[
-65.29358005627455,
47.35396841221251
],
[
-65.17873639716697,
47.47216492916817
],
[
-65.32377354751117,
47.635343686761814
],
[
-65.07368063185561,
47.78446441480094
],
[
-64.81585118768214,
47.80683922984662
],
[
-64.67474884917999,
47.71399404289082
],
[
-64.9034776061066,
47.557322269707015
],
[
-64.88065039699819,
47.44903381755671
]
]
]
}
}
]
}
var map = L.map('map').setView([55, -95], 4);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '+
'Baselayer © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
function style(feature) {
return {
weight: 1,
opacity: 1,
color: 'white',
fillOpacity: 0.7,
fillColor: 'grey'
};
};
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#FFF',
dashArray: '',
fillOpacity: 0.7
});
};
function resetHighlight(e) {
geojson.resetStyle(e.target);
};
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
};
var onEachFeature_LMA = function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
var div = $('<div class="popupGraph" style="width: 300px; height:200px;"><svg/></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
var width = 500;
var height = 300;
var svg = d3.select(div)
.select("svg")
.attr("width", width)
.attr("height", height)
.append("rect")
.attr("width", 300)
.attr("height", 150)
.style("fill", "steelblue");
}
var geojson = L.geoJson(Sample, {
style: style,
onEachFeature: onEachFeature_LMA
}).addTo(map);
1 個解決方案
解決方案1
1 已采納 2015-06-12 18:31:58
我剛剛更新了你的小提琴 。
使用數據獲取條形圖的關鍵是，在onEachFeature函數中，將數據包含在feature.properties 。 通過以下內容，我准備了條形圖的數據：
var values = feature.properties;
var data = [
{name:"Educ", value:values["Educ"]},
{name:"Earnings", value:values["Earnings"]},
{name:"Ind", value:values["Ind"]},
{name:"Housing", value:values["Housing"]},
{name:"AccToSer", value:values["AccToSer"]},
{name:"EcPerfInd", value:values["EcPerfInd"]}
];
如果只有屬性應顯示在圖中，則可以對此進行改進。 這樣就可以對名稱進行硬編碼...
對於條形圖，必須為每個數據元素附加一個矩形。
var bar = svg.selectAll("g.bar")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", function(d){return x(d.value);})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d.value) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
我為每個元素添加了一個g ，以方便在內部放置rect和text 。
這個例子是基於mike bostocks的，我們來制作條形圖 。
D3 分組條形圖來自 Arrays
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.