This datetime barChart is causing me some trouble. Interestingly, when I try to replicate the issue in a fiddle (check here), everything functions as expected. Please note that the data takes about 30 seconds to load from github.
Below is the code for the graph :
pnlPerDaybarChart
.height(300)
.width(700)
.dimension(dims.date)
.group(groups.date.pnlSum)
.valueAccessor(function(d) {
return Math.abs(d.value);
})
.renderTitle(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.days)
.colors(colorChoice)
.colorAccessor(function(d) {
if (+d.value>0) {
return("positive");
} else {
return("negative");
}
})
.brushOn(true)
.elasticY(true)
.margins({left: 70 ,top: 10, bottom: 30, right: 50})
.centerBar(true);
Is there something obvious that I might be missing here? If not, any suggestions on where to begin debugging? I've already invested quite a bit of time into this and haven't been able to identify any issues.
UPDATE: Upon removing the .xUnits instructions, the bars become very slim but are correctly positioned along the axis. This leads me to suspect an error in the calculation of bar width. However, I'm unsure how to investigate that specific calculation. Any insight would be greatly appreciated.
UPDATE 2: The width attribute of the
<g class="chart-body"><g class="stack _0"><rect class="bar"></rect></g></g>svg all seem to have incorrect values. If someone could direct me to where this calculation occurs in the d3 library, it may help me resolve the issue.
UPDATE 3: I've identified the root cause of my problem. It appears that the width of the bars is inaccurate because the calculateBarWidth() function only runs once during graph instantiation and doesn't execute again even when dc.redrawAll() is called. In my scenario, I continuously add data chunks to my crossfilter and redraw the graphs. My new query is - "How can I prompt calculateBarWidth() to rerun?"