d3.js - Uncaught TypeError: dc.leafletMarkerChart is not a function -
i trying add marker cluster on dc.js charts , stuck error.individual code running on merging pie chart ,bar chart , map , marker not displaying.
<!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 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 nearest 0.5 //d.beer.beer_abv = math.round(+d.beer.beer_abv * 2) / 2; //round 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 same kind of anonymous function used 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 = 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 row here remove 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 rendered remove row dc.js insists on adding table.select('tr.dc-table-group').remove(); // update map breweries 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> and error :
uncaught typeerror: dc.leafletmarkerchart not function @ drawmarkerselect (bubble.html:118) @ bubble.html:108 @ object.<anonymous> (d3.js:1996) @ object.event (d3.js:504) @ xmlhttprequest.respond (d3.js:1949)
note following page useful fix issue. make sure install using bower , include scripts in html.
Comments
Post a Comment