有没有人在div对象中处理程序化D3条形图？
我正在开发一个项目的网络地图（传单）中的一系列图层，我正在努力解决这个问题。我理解如何将一个D3对象发送到div的过程，而div又被发送到一个弹出窗口，但是我对图表失败了。
某些上下文：数据位于加载了链接关系的geojson中。我的目标是为点击的区域（“LabMarPres”，“Educ”，“Earnings”，“Ind”，“Housing”，“AccToSer”，“EcPerfInd”）制作一个带有条形图的水平条形图。
我找到了许多带有这样数据的图表示例：“name”，“value”但没有什么可以帮助我理解如何使用上面提到的每个值为一个区域名称制作图表。
目标是在点击弹出窗口中生成图表。
我很亲近，我能感受到它。我在小提琴中创造了一个样本。 感谢任何见解让我朝着正确的方向前进！
代码：
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);
答案 0 :(得分：1)
我刚刚更新了您的fiddle。
获取数据条形图的关键是，在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放在里面。