我是新来的Javascript
,dc.js
和crossfilter
。到目前为止,当我单击以选择指定的区域或病房时,我的仪表板正在响应。我还回答了所选总数据的计数,但没有显示在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)