地图未显示。以下是我的代码。
<!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>
现在，评论的部分引用了地图。如果注释部分未被注释，则只显示没有标记和其他图表的地图。只是地图可以看到。如果它被注释掉，那么只有这样才能看到图表。
data1.csv文件包含所有信息以及标记应该出现的位置的纬度和经度。
任何形式的帮助将不胜感激。感谢。