I am encountering an issue with a table in DC.js where every odd row is appearing as an extra row. The table should only have two columns - the first column displaying the state and the second column showing an amount named fund. However, upon inspection of the image provided, it is evident that there is an additional row that solely displays a number matching the value in the right column of each even row.
https://i.sstatic.net/P6iXT.png
Below is the JS code snippet:
<script>
var text = '[';
var obj;
url = "/funding";
d3.json(url, function(error, json_response) {
for (var item in json_response['proposals']) {
item = parseInt(item);
fund = json_response['proposals'][item]['totalPrice'];
state = json_response['proposals'][item]['state'];
obj = '{ "state":' + '"' + state + '"' + ', "fund":' + fund + '}';
text += obj + ',';
}
text = text.substring(0, text.length - 1);
text += ']';
data = JSON.parse(text);
cf = crossfilter(data);
stateDim = cf.dimension(function(d) {
return d.state;
});
fundDim = stateDim.group().reduceSum(function(d) {
return d.fund;
});
datatable = dc.dataTable("#tablechart");
datatable
.dimension(stateDim)
.group(function(d) {
return d.fund;
})
.columns([
function(d) {
return d.state;
},
function(d) {
return d.fund;
}
]);
dc.renderAll();
});
</script>
Here is the HTML snippet:
<div class="table-responsive">
<table id="tablechart" class="table table-bordered table-hover table-striped">
<thead>
<tr class="header">
<th>State</th>
<th>Funding($)</th>
</tr>
</thead>
</table>
</div>
I attempted to add '.showGroups(false)' based on this source, however, I encountered the following error in the console:
Uncaught TypeError: datatable.dimension(...).group(...).showGroups is not a function
(anonymous function) @ (index):388
(anonymous function) @ d3.min.js:1
t @ d3.min.js:1
i @ d3.min.js:1
Thank you,