未捕获的TypeError:dc.leafletMarkerChart不是函数

时间:2017-04-07 12:12:02

标签: d3.js leaflet dc.js crossfilter

我正在尝试在我的dc.js图表​​上添加标记群集并遇到此错误。个别代码正在运行,但在将其与饼图,条形图和地图合并时,标记未显示。

<!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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: '&copy; <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)


​

1 个答案:

答案 0 :(得分:0)

请注意,以下页面可用于解决此问题。确保使用bower安装,然后在html中包含脚本。

https://github.com/Intellipharm/dc-addons