问题
The map is not showing up. The following is my code.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bower_components/dcjs/dc.css">
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/crossfilter2/crossfilter.min.js"></script>
<script src="bower_components/dcjs/dc.js"></script>
<script src="bower_components/dc-addons/dist/leaflet-map/dc-leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script> -->
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLashRsAacU5z2ZZxrdNTrRGeCAj1-C_w&libraries=drawing"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB07LmwKRsCSqCHcjRKYc9yW_sgJuJcmmE&callback=initMap"></script>
<!--<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>-->
<script src="bower_components/dc-addons/dist/google-map/dc-google.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.js"></script>
<style>
#holder {
width:850px;
margin:20px auto;
}
#holder {
padding:30px 0;
clear:both;
}
#map{
width: 20%;
}
#pie{
}
</style>
</head>
<body>
<div class="row" id="row"></div>
<div class="row2" id="row2"></div>
<div class="row3" id="row3"></div>
<div class="pie2" id="pie2"></div>
<div class="pie3" id="pie3"></div>
<div class="pie4" id="pie4"></div>
<div class="pie5" id="pie5"></div>
<div class="pie6" id="pie6"></div>
<div class="pie7" id="pie7"></div>
<div class="pie8" id="pie8"></div>
<div id="holder">
<div id="demo1">
<div class="map"></div>
<div class="pie">
<h3>Favorite Candidate</h3>
<div id="#pie"></div>
</div>
</div>
</div>
<script>
d3.csv("data/data1.csv", function(data) {
var ndx = crossfilter(data);
/*var facilities = ndx.dimension(function(d) { return [d.team, d.latitude, d.longitude]; });
var facilitiesGroup = facilities.group().reduceCount();
var markers = {};
dc.leafletCustomChart("#demo1 .map")
.dimension(facilities)
.group(facilitiesGroup)
.width(600)
.height(400)
.center([34.1083, -117.2898])
.zoom(7)
.renderItem(function(chart, map, d, i) {
var icon = null;
if (d.key[0] === 'A') {
icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
} else if (d.key[0] === 'B') {
icon = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
} else if (d.key[0] === 'C') {
icon = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
} else if (d.key[0] === 'D') {
icon = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
}
var marker = new L.Marker(chart.toLocArray(d.key[1]), {
title: d.key[0] + " : " + d.value +d.value,
alt: d.key[0] + " : " + d.value + d.value,
icon: new L.icon({
iconUrl: icon,
iconSize: [25, 25],
className: 'dot'
}),
});
marker.addTo(map);
markers[i] = marker;
})
.redrawItem(function(chart, map, d, i) {
markers[i].setOpacity(d.filtered ? 0 : 1);
});
*/
var prtyDim = ndx.dimension(function(d) { return d.team; });
var prtyGroup = prty.group().reduceCount();
var tDim = ndx.dimension(function(d) { return d["Ttl"]; });
var tGroup = tDim.group().reduceCount();
var sdDim = ndx.dimension(function(d) {
return d["S_D"];
});
var sd_filter = sdDim.filter("yes");
var sdGroup = sdDim.group().reduceCount();
var drcDim = ndx.dimension(function(d) { return d.Drct; });
var drcrGroup = drcDim.group(function(v) {
if(v == "rt") return "rt";
else return " ";
});
var drcwGroup = drcDim.group(function(v) {
if(v == "wt") return "wt";
else return " ";
});
var drcnGroup = drcDim.group(function(v) {
if(v == "ns") return "ns";
else return " ";
});
var gDim = ndx.dimension(function(d) {
return d.gd;
});
var gmGroup = gDim.group(function(w) {
if(w == "M") return "Male";
else return "";
});
var gfGroup = gDim.group(function(w) {
if(w == "F") return "Female";
else return "";
});
var guGroup = gDim.group(function(w) {
if(w == "") return "ns";
});
dc.pieChart("#demo1 .pie")
.dimension(tDim)
.group(tGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.colors(d3.scale.ordinal().range([ '#1919FF', '#32FF32', 'FF0000']))
.ordering(function (p) {
return -p.value;
});
dc.rowChart("#row")
.dimension(prty)
.group(prtyGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.rowChart("#row2")
.dimension(sdDim)
.group(sdGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.barChart("#row3")
.height(400)
.width(400)
.ordinalColors(["#7FC97F","#BEAED4",'#FDC086'])
.dimension(sdDim)
.x(d3.scale.ordinal())
.barPadding(0.05)
.outerPadding(0.05)
.xUnits(dc.units.ordinal)
.group(sdGroup, "Yes")
.valueAccessor(function(d) {return d.value["yes"];})
.stack(sdGroup, "No", function(d) {return d.value["no"];})
.stack(sdGroup, "not sure", function(d) {return d.value["not sure"];})
.renderlet(function(c) {
c.svg().select('g').attr("transform","rotate(90 200,200)");
});
dc.pieChart("#pie2")
.dimension(drcDim)
.group(drcrGroup)
.width(200)
.height(200)
.innerRadius(40)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.pieChart("#pie3")
.dimension(drcDim)
.group(drcwGroup)
.width(200)
.height(200)
.innerRadius(40)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.pieChart("#pie4")
.dimension(drcDim)
.group(drcnGroup)
.width(200)
.height(200)
.innerRadius(40)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.pieChart("#pie5")
.dimension(gDim)
.group(gmGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.pieChart("#pie6")
.dimension(gDim)
.group(gfGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.pieChart("#demo1 .pie7")
.dimension(gDim)
.group(guGroup)
.width(200)
.height(200)
.renderLabel(true)
.renderTitle(true)
.ordering(function (p) {
return -p.value;
});
dc.renderAll();
});
</script>
</body>
Now, the commented part refers to the map. If the commented part is uncommented, then just the map is shown without the markers and other charts. Just the map can be seen. And if it is commented out, only then can the charts be seen.
The data1.csv file contains all the information plus the latitude and longitude of the places where the markers should turn up.
Any kind of help would be greatly appreciated. Thanks.
来源：https://stackoverflow.com/questions/45950779/crossfiltering-using-google-maps