我想在传单地图上显示标记,其半径将根据我的行图表中每个元素的值而变化。
作为javascript的初学者,我测试了几种解决方案,但均无效果。
这会向我显示标记的位置,但在同一位置的标记数与所需值的数量一样,而不是每个位置和该值的半径的1个标记。
var q = queue()
.defer(d3.csv, "prod.csv")
.defer(d3.csv, "bro.csv");
q.await(function(error, prodata, brodata) {
function join(lookupTable, mainTable, lookupKey, mainKey, select) {
var l = lookupTable.length,
m = mainTable.length,
lookupIndex = [],
output = [];
for (var i = 0; i < l; i++) {
var row = lookupTable[i];
lookupIndex[row[lookupKey]] = row;
}
for (var j = 0; j < m; j++) {
var y = mainTable[j];
var x = lookupIndex[y[mainKey]];
output.push(select(y, x));
}
return output;
};
var data = join(brodata, prodata, "BRO", "BRO", function(bro, geo) {
return {
hbro: bro.BRO,
DateR : bro.DateR,
week: bro.Week,
lat: geo.lat,
lon: geo.long};
});
broChart = dc.rowChart("#brograph");
weekChart = dc.barChart("#weekgraph"),
var ndx = crossfilter(data);
var all = ndx.groupAll();
var allDim = ndx.dimension(function(d) {return d;});
var broDim = ndx.dimension(function (d) { return d['hbro']; });
var broGroup = broDim.group();
var weekDim = ndx.dimension(function (d) { return d['Week']; });
var weekGroup = weekDim.group();
var dateDim = ndx.dimension(function (d) { return d['DateR']; });
var dateGroup = dateDim.group();
minDate = weekDim.bottom(1)[0]["Week"];
maxDate = weekDim.top(1)[0]["Week"];
weekChart
.width(400)
.dimension(weekDim)
.group(weekGroup)
.x(d3.scale.linear().domain([minDate, maxDate]))
.xAxis().ticks(maxDate);
broChart
.width(400)
.dimension(broDim)
.group(broGroup)
.elasticX(true);
var map = L.map('mymap');
var drawMap = function(){
map.setView([43.7580261, 4.6074231], 12);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 15,
}).addTo(map);
};
var result = broGroup.top(Infinity);
allDim.top(Infinity).forEach(function (d, result) {
var marker = new L.circleMarker([d.lat, d.lon]);
marker.bindPopup(d.hbro);
marker.setRadius(Math.sqrt(d.????? * 0.00010));
marker.addTo(map);
});
drawMap();
dc.renderAll();
});