JavaScript和dc-js中的数据表

时间:2018-09-12 07:40:51

标签: javascript dc.js crossfilter

我是新来的Javascriptdc.jscrossfilter。到目前为止,当我单击以选择指定的区域或病房时,我的仪表板正在响应。我还回答了所选总数据的计数,但没有显示在datable(VisTable)中所选的数据。

我在这里做错了什么?

<div id="Districtname">
  <strong>District Name</strong>
  <span class="reset" style="display: none;">Selected: <span class="filter">    
  </span></span>
  <a class="reset" href="
  javascript:districtnamechart.filterAll();dc.redrawAll();" style="display:
     none;">reset</a>

    <div class="clearfix"></div>



</div>
<div id="wardname">
  <strong>Ward Name</strong>
  <span class="reset" style="display: none;">Selected: <span class="filter">    
  </span></span>
  <a class="reset" href="
  javascript:wardnamechart.filterAll();dc.redrawAll();" style="display:
     none;">reset</a>

    <div class="clearfix"></div>

</div>

 <div>
    <div class="dc-data-count">
        <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
            href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</div>
</div>
<table class="table table-hover dc-data-table">
</table>



<script src="crossfilter.js"></script>
<script src="d3.js"></script>
<script src="dc.js"></script>

<script>

    var districtnamechart = dc.rowChart("#Districtname"),
      wardnamechart = dc.rowChart("#wardname"),
      visCount = dc.dataCount(".dc-data-count"),
      visTable = dc.dataTable(".dc-data-table");



    d3.csv("universe_test.csv", function (err,data) {

           //,kmist,city,district,ward,Lat,Long
           //0,KTMPVN15707,Ho Chi Minh,Can Gio,Can Thanh,10.41525,106.97254
           //1,KTMPVN15706,Ho Chi Minh,Can Gio,Can Thanh,10.41392,106.97056


        if (err) throw err; 

        var ndx = crossfilter(data);
        var all = ndx.groupAll();

        var districtDIM = ndx.dimension(function (d) { return d["district"]; })
          ;
        var wardDIM = ndx.dimension(function (d) { return d["ward"]; 
          });

        var districtgroup = districtDIM.group();
        var wardgroup = wardDIM.group();

        districtnamechart
            .height(800)
            .dimension(districtDIM)
            .group(districtgroup)
            .elasticX(true);

        wardnamechart
            .height(800)
            .dimension(wardDIM)
            .group(wardgroup)
            .elasticX(true)
            .data(function (group) { return group.top(20); });


        visCount
        .dimension(ndx)
        .group(all);

        visTable
        .dimension(ndx)
        .group(all)
        .columns([
            "district"
            "ward"
            ]);


        dc.renderAll();

    });  
</script>

我的错误代码:

Uncaught TypeError: _chart.dimension(...).bottom is not a function
    at nestEntries (dc.js:6615)
    at renderGroups (dc.js:6587)
    at Object._chart._doRender (dc.js:6501)
    at Object._chart.render (dc.js:1654)
    at Object.dc.renderAll (dc.js:251)
    at (index):109
    at Object.<anonymous> (d3.js:1996)
    at Object.event (d3.js:504)
    at XMLHttpRequest.respond (d3.js:1949)

0 个答案:

没有答案