有人可以告诉我为什么我的d3图表没有出现在我的弹出式窗口中吗？完整jsfiddle here.。
我的弹出窗口显示的数据集现在是假设的，只是试图测试并确保我可以使基础工作。
这是我的代码：
var onEachFeature = function onEachFeature(feature,layer){
var div = $('<div id="chart"><h3>Ethnic Group Distribution</h3><svg/></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
//Width and height
var w = 400;
var h = 300;
var barPadding = 1;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element
var svg = d3.select("chart")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
});
};
L.geoJson(afghanDistricts, {
onEachFeature: onEachFeature
}).addTo(map);
答案 0 :(得分：1)
而不是：
var svg = d3.select("chart")//not work because chart is not bound to the DOM
.append("svg")
.attr("width", w)
这样做：
var svg = d3.select(div)//the div which holds the tooltip
.append("svg")
工作代码here
答案 1 :(得分：1)
您不需要jQuery将弹出窗口的内容字符串编译为DOM，L.Popup的{{1}}方法已经为您执行此操作：
setContent设置弹出窗口的HTML内容。
http://leafletjs.com/reference.html#popup-setcontent
弹出窗口未打开时，无法初始化图表。内容setContent( <String|HTMLElement> htmlContent )
元素仅在弹出窗口打开时附加到DOM。弹出窗口关闭后会再次删除它。因此，每次弹出窗口打开时，您都需要初始化图表。您可以使用地图实例的div事件来执行此操作：
popupopen打开弹出窗口时触发（使用openPopup方法）。
http://leafletjs.com/reference.html#map-popupopen
当使用D3的L.mapbox.map(...).on('popupopen', function () {
// Do stuff
});
方法按唯一标识符获取元素时，您需要为select字符添加前缀：
#例如，您可以按标签（“div”），类（“.awesome”），唯一标识符（“#foo”），属性（“[color = red]”）或包含（“父级”）进行选择子“）。
https://github.com/mbostock/d3/wiki/Selections
此外，您无需在内容中添加D3.selector('#chart')
元素，因为您已经添加了新的svg元素：svg。这会创建一个新的.append("svg")元素并附加它。
这是一个工作片段：
svgvar afghanDistricts = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#555555","fill-opacity":0.5,"Pashtun":0.43,"Tajik":0.12,"Uzbek":0.05,"Turkmen":"0.00","Hazara":"0.00","District":"Argo","Province":"Kandahar"},"geometry":{"type":"Polygon","coordinates":[[[61.69921875,32.08257455954592],[61.69921875,32.879587173066305],[62.666015625,32.879587173066305],[62.666015625,32.08257455954592],[61.69921875,32.08257455954592]]]}},{"type":"Feature","properties":{"Pashtun":0.32,"Tajik":"0.20","Uzbek":0.01,"Turkmen":0.02,"Hazara":"0.00","District":"Jurm","Province":"Farah"},"geometry":{"type":"Polygon","coordinates":[[[62.75390625,32.95336814579932],[62.75390625,33.76088200086917],[63.69873046874999,33.76088200086917],[63.69873046874999,32.95336814579932],[62.75390625,32.95336814579932]]]}},{"type":"Feature","properties":{"Pashtun":0.05,"Tajik":"0.50","Uzbek":0.21,"Turkmen":"0.00","Hazara":"0.00","District":"Ragh","Province":"Ghor"},"geometry":{"type":"Polygon","coordinates":[[[63.74267578125,33.54139466898275],[63.74267578125,34.43409789359469],[65.14892578125,34.43409789359469],[65.14892578125,33.54139466898275],[63.74267578125,33.54139466898275]]]}},{"type":"Feature","properties":{"Pashtun":"0.00","Tajik":0.01,"Uzbek":"0.10","Turkmen":"0.20","Hazara":"0.40","District":"Highan","Province":"Kabul"},"geometry":{"type":"Polygon","coordinates":[[[64.53369140625,35.15584570226544],[64.53369140625,35.94243575255426],[65.56640625,35.94243575255426],[65.56640625,35.15584570226544],[64.53369140625,35.15584570226544]]]}},{"type":"Feature","properties":{"Pashtun":"0.00","Tajik":0.01,"Uzbek":"0.20","Turkmen":"0.30","Hazara":0.04,"District":"Nusay","Province":"Kunduz"},"geometry":{"type":"Polygon","coordinates":[[[65.58837890625,33.30298618122413],[65.58837890625,34.32529192442733],[66.90673828125,34.32529192442733],[66.90673828125,33.30298618122413],[65.58837890625,33.30298618122413]]]}},{"type":"Feature","properties":{"Pashtun":"0.20","Tajik":"0.00","Uzbek":"0.00","Turkmen":"0.10","Hazara":"0.20","District":"Zebak","Province":"Logar"},"geometry":{"type":"Polygon","coordinates":[[[65.98388671875,34.72355492704219],[65.98388671875,35.53222622770337],[66.95068359374999,35.53222622770337],[66.95068359374999,34.72355492704219],[65.98388671875,34.72355492704219]]]}},{"type":"Feature","properties":{"Pashtun":"0.10","Tajik":"0.10","Uzbek":0.28,"Turkmen":"0.10","Hazara":"0.00","District":"Wakhan","Province":"Nimruz"},"geometry":{"type":"Polygon","coordinates":[[[67.32421875,34.43409789359469],[67.32421875,35.42486791930558],[68.37890625,35.42486791930558],[68.37890625,34.43409789359469],[67.32421875,34.43409789359469]]]}}]}
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('mapbox', null, {
'center': [0, 0],
'zoom': 0
}).on('popupopen', function () {
var w = 400;
var h = 300;
var barPadding = 1;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
});
});
var geojson = new L.GeoJSON(afghanDistricts, {
onEachFeature: function (feature, layer) {
layer.bindPopup(new L.popup().setContent('<div id="chart"><h3>Ethnic Group Distribution</h3></div>'));
}
}).addTo(map);
map.fitBounds(geojson.getBounds());body {
margin: 0;
padding: 0;
}
#mapbox {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 500px;
}