0
我想在我的dc.js圖表上添加標記集羣，並陷入此錯誤。個別代碼正在運行，但將它與餅圖，條形圖和地圖，標記不顯示。未捕獲TypeError：dc.leafletMarkerChart不是函數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css" />
<script type='text/javascript' src='js/jquery-3.1.0.min.js'></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<!-- <script type="text/javascript" src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 dc-data-count dc-chart" id="data-count">
<h2>Ground Water Analysis
<small>
<span class="filter-count"></span> selected out of <span class="total-count"></span> records |
<a id="all" href="#">Reset All</a>
</span>
</small>
</h1>
</div>
</div>
<div class="row" id="control-row">
<div class="col-xs-2 pie-chart">
<h4> YEAR <small><a id="year">reset</a></small></h4>
<div class="dc-chart" id="chart-ring-year"></div>
</div>
<div class="col-xs-2 pie-chart">
<h4> DISTRICT<small><a id="month" href="#">reset</a></small></h4>
<div class="dc-chart" id="chart-ring-month"></div>
</div>
<div class="col-xs-16">
<h4><center>Map</center></h4>
<div id="map"></div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="divide">
<div class="dc-chart" id="chart-rating-count"></div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="divide1">
<div class="dc-chart" id="chart-community-rating-count"></div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="divide2">
<div class="dc-chart" id="chart-abv-count"></div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="divide3">
<div class="dc-chart" id="chart-ibu-count"></div>
</div>
</div>
<script>
var map = L.map('map', {
center: [20.5937,78.9629],
minZoom: 2,
zoom: 3,
});
var Markers = new L.FeatureGroup();
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a','b','c']
}).addTo(map);
d3.json("file/edited.json", function(error, data) {
var welldata = data.items;
drawMarkerSelect(welldata);
function drawMarkerSelect(welldata) {
var xf = crossfilter(welldata);
var groupname = "marker-select";
var facilities = xf.dimension(function(d) { return d.LAT; });
var facilitiesGroup = facilities.group().reduceCount();
var marker = dc.leafletMarkerChart("#demo1.map",groupname)
.dimension(facilities)
.group(facilitiesGroup)
.width(600)
.height(400)
.fitOnRender(true)
.fitOnRedraw(true)
.popupOnHover(true)
.cluster(true);
var types = xf.dimension(function(d) { return d.DISTRICT; });
var typesGroup = types.group().reduceCount();
dc.renderAll(groupname);
return {marker: marker}; }
welldata.forEach(function(d) {
d.YEAR_OBS = d.YEAR_OBS.match(/\d+/)[0];
d.DISTRICT = d.DISTRICT.match(/\w+/);
//d.count = +d.count;
//round to nearest 0.25
d.MONSOON = +d.MONSOON;
d.PREMONSOON = +d.PREMONSOON;
d.POSTMONSOO=+d.POSTMONSOO;
d.POSTMONS_1=+d.POSTMONS_1;
//d.DISTRICT=+d.DISTRICT;
//d.beer.rating_score = Math.round(+d.beer.rating_score * 4)/4;
//round to nearest 0.5
//d.beer.beer_abv = Math.round(+d.beer.beer_abv * 2)/2;
//round to nearest 10
//d.beer.beer_ibu = Math.floor(+d.beer.beer_ibu/10) * 10;
//d.first_had_dt = fullDateFormat.parse(d.first_had);
//d.first_had_year = +yearFormat(d.first_had_dt);
});
//set crossfilter
var ndx = crossfilter(welldata);
//create dimensions (x-axis values)
var yearDim = ndx.dimension(function(d) {return d.YEAR_OBS;}),
dist = ndx.dimension(function(d) {return d.DISTRICT;}),
//dc.pluck: short hand for same kind of anonymous function we used for yearDim
ratingDim = ndx.dimension(dc.pluck('MONSOON')),
ratingDim1 = ndx.dimension(dc.pluck('PREMONSOON')),
ratingDim2 = ndx.dimension(dc.pluck('POSTMONSOO')),
ratingDim3 = ndx.dimension(dc.pluck('POSTMONS_1')),
//commRatingDim = ndx.dimension(function(d) {return d.beer.rating_score;}),
//abvDim = ndx.dimension(function(d) {return d.PREMONSOON;}),
//ibuDim = ndx.dimension(function(d) {return d.beer.beer_ibu;}),
allDim = ndx.dimension(function(d) {return d;});
//creating groups (y-axis values)
var all = ndx.groupAll();
var countPerYear = yearDim.group().reduceCount(),
countPerDist = dist.group().reduceCount(),
countPerRating = ratingDim.group().reduceCount()
countPerRating1 = ratingDim1.group().reduceCount()
countPerRating2 = ratingDim2.group().reduceCount()
countPerRating3= ratingDim3.group().reduceCount();
//countPerCommRating = commRatingDim.group().reduceCount();
//countPerABV = abvDim.group().reduceCount();
//countPerIBU = ibuDim.group().reduceCount();
//creating charts
var yearChart = dc.pieChart('#chart-ring-year'),
monthChart = dc.pieChart('#chart-ring-month'),
ratingCountChart = dc.barChart('#chart-rating-count'),
ratingCountChart1 = dc.barChart('#chart-community-rating-count'),
ratingCountChart2 = dc.barChart('#chart-abv-count'),
ratingCountChart3 = dc.barChart('#chart-ibu-count'),
//commRatingCountChart = dc.barChart('#chart-community-rating-count'),
//abvCountChart = dc.barChart('#chart-abv-count'),
//ibuCountChart = dc.barChart('#chart-ibu-count'),
dataCount = dc.dataCount('#data-count'),
dataTable = dc.dataTable('#data-table');
////chart configuration
//circle charts
yearChart
.width(200)
.height(200)
.dimension(yearDim)
.group(countPerYear)
.innerRadius(20);
monthChart
.width(200)
.height(200)
.dimension(dist)
.group(countPerDist)
.innerRadius(20);
//bar charts
ratingCountChart
.width(350)
.height(230)
.dimension(ratingDim)
.group(countPerRating)
.x(d3.scale.linear().domain([-0.2, d3.max(welldata, function (d) { return d.MONSOON; }) + 0.2]))
.y(d3.scale.linear().domain([-0.2, d3.max(welldata, function (d) { return d.MONSOON>0; }) + 0.2]))
.elasticY(true)
.centerBar(true)
.barPadding(5)
.xAxisLabel('MONSOON')
.yAxisLabel('Count')
/*.y(function(d) { return y(d.y); })
.defined(function(d) { return d.y; }) // Omit empty values.
.x(function(d,i) { return x(i); });
*/
.margins({top:10, right: 20, bottom: 50, left: 40});
ratingCountChart.xAxis().tickValues([0,10,20,30,40,50,60,70,80,90,100,110]);
ratingCountChart1
.width(350)
.height(230)
.dimension(ratingDim1)
.group(countPerRating1)
.x(d3.scale.linear().domain([-0.2, d3.max(welldata, function (d) { return d.PREMONSOON; }) + 0.2]))
.elasticY(true)
.centerBar(true)
.barPadding(5)
.xAxisLabel('PREMONSOON')
.yAxisLabel('Count')
.margins({top: 2, right: 20, bottom: 50, left: 50});
ratingCountChart1.xAxis().tickValues([0,10,20,30,40,50,60,70,80,90,100,110]);
ratingCountChart2
.width(350)
.height(230)
.dimension(ratingDim2)
.group(countPerRating2)
.x(d3.scale.linear().domain([-0.2, d3.max(welldata, function (d) { return d.POSTMONSOO; }) + 0.2]))
.elasticY(true)
.centerBar(true)
.barPadding(5)
.xAxisLabel('POSTMONSOON')
.yAxisLabel('Count')
.margins({top: 10, right: 20, bottom: 50, left: 50});
ratingCountChart1.xAxis().tickValues([0,10,20,30,40,50,60,70,80,90,100,110,120]);
ratingCountChart3
.width(350)
.height(230)
.dimension(ratingDim3)
.group(countPerRating3)
.x(d3.scale.linear().domain([-0.2, d3.max(welldata, function (d) { return d.POSTMONS_1; }) + 0.2]))
.elasticY(true)
.centerBar(true)
.barPadding(5)
.xAxisLabel('POSTMONSOON_1')
.yAxisLabel('Count')
.margins({top: 10, right: 20, bottom: 50, left: 50});
ratingCountChart1.xAxis().tickValues([0,10,20,30,40,50,60,70,80,90,100,110,120]);
dataCount
.dimension(ndx)
.group(all);
//data table
dataTable
.dimension(allDim)
.group(function (d) { return 'dc.js insists on putting a row here so I remove it using js'; })
.size(100)
.columns([
function (d) { return d.OBJECTID; },
function (d) { return d.YEAR_OBS; },
function (d) { return d.MONSOON; },
function (d) { return d.PREMONSOON; },
function (d) { return d.POSTMONSOO; },
function (d) { return d.POSTMONS_1; },
function (d) { return d.DISTRICT; },
])
.sortBy(function (d) { return d.OBJECTID; })
.order(d3.ascending)
.on('renderlet', function (table) {
//each time table is rendered remove extra row dc.js insists on adding
table.select('tr.dc-table-group').remove();
// update map with breweries to match filtered data
/*Markers.clearLayers();
_.each(allDim.top(Infinity), function (d) {
// var loc;
//var loc = d.LONG;
var name = d.DISTRICT;
var marker = L.marker([d.LAT]);
marker.bindPopup("<p>"+ d.DISTRICT + " " + "</p>");
Markers.addLayer(marker);
});
map.addLayer(Markers);
map.fitBounds(Markers.getBounds());
*/
});
d3.selectAll('a#all').on('click', function() {
dc.filterAll();
dc.renderAll();
});
d3.selectAll('a#year').on('click', function() {
yearChart.filterAll();
dc.redrawAll();
});
d3.selectAll('a#month').on('click', function() {
monthChart.filterAll();
dc.redrawAll();
});
dc.renderAll();
/*beerData.filter(function(d) {
var elem = document.getElementById("chart-rating-count");
//console.log(d)
return d.MONSOON == 0;
})
elem.remove();
*/
});
</script>
</body>
</html>
和錯誤是：
Uncaught TypeError: dc.leafletMarkerChart is not a function
at drawMarkerSelect (bubble.html:118)
at bubble.html:108
at Object.<anonymous> (d3.js:1996)
at Object.event (d3.js:504)
at XMLHttpRequest.respond (d3.js:1949)
'dc.leafletMarkerChart'是dc.js這就是[直流插件]（https://github.com/Intellipharm/dc-addons#leafletjs）庫的一部分的延伸部，但我沒有看到包含該腳本。 （另一個選項，大致相同，是[dc.leaflet.js]（https://github.com/dc-js/dc.leaflet.js））。 – Gordon
錯誤解決了我將小冊子的代碼放入圖表中，因此出現此錯誤 –