I'm running DC.js rev 3.0.2 and D3.js rev 5.16.0 and Crossfilter.js rev 1.5.4. When creating a simple pie chart from the examples, it doesn't show anything and gives the following output in console:
Uncaught TypeError: Cannot read properties of undefined (reading 'by')`
at _chart.ordering (base-mixin.js:348:44)
at dc.capMixin (cap-mixin.js:20:12)
at dc.pieChart (pie-chart.js:47:21)
at pie.html:19:16
Here is the code:
<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">
var chart = dc.pieChart("#test");
d3.csv("morley.csv").then(function(experiments) {
var ndx = crossfilter(experiments),
runDimension = ndx.dimension(function(d) {return "run-"+d.Run;})
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});
chart
.width(768)
.height(480)
.slicesCap(4)
.innerRadius(100)
.dimension(runDimension)
.group(speedSumGroup)
.legend(dc.legend().highlightSelected(true))
// workaround for #703: not enough data is accessible through .label() to display percentages
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
});
chart.render();
});
The piechart is working in Chrome but not in Edge, Firefox or on my Android mobile.
dc.js 3.0.2 is an old version (from 2018).
If you’re using an old version and run into these kinds of problems, you should check the package.json to see if you are using compatible versions of dependent libraries.
In this case, it says you should use crossfilter 1.4.5, which still supports sorting functions.