DC.js brush to select range not working with scaleTime
DC.js brush to select range not working with scaleTime
PROLOGUE
This is my first time posting to stackoverflow and i'm a noob with dc.js. Apologies in advance for etiquette transgressions (feedback welcome on this too)
PROBLEM
I have defined a barchart and it displays perfectly, but brushOn(true) is not letting me filter the data. In the past, this seemed to work perfectly with a crosshair appearing as soon as i hovered over the bargraph. Now it is not. Any idea why?! or what i can do to fix it? I'm on day 3 of trying to figure out what is happening. The help is MUCH appreciated!
PREREQS:
https://d3js.org/d3.v5.min.js
crossfilter.min.js
https://unpkg.com/dc@3.0.4/dc.js
CODE FOR BARCHART
I have defined a barchart as follows:
filterDim = cross.dimension(function(d){return d3.timeWeek(d.date);});
var filterGroup = filterDim.group().reduceSum(function(d){
if(d.isTrue){return 1;}
else {return 0;} });
height=400;
if(width == 0){
width = $(dom_id).parent().innerWidth();
}
var hitsbarChart = dc.barChart(dom_id);
hitsbarChart
.width(width).height(height)
.dimension(sentDimension)
.group(allGroups[0].data,allGroups[0].name)
.xUnits(d3.timeWeeks);
hitsbarChart
.x(d3.scaleTime())
.valueAccessor(function(d){return d.value;})
.keyAccessor(function(d){return d.key;})
.round(d3.timeWeek.round)
.yAxis().ticks(d3.format('.3s'));
function calc_domain(chart) {
var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
max = d3.max(chart.group().all(), function(kv) { return kv.key; });
max = d3.timeMonth.offset(max, 1);
chart.x().domain([min, max]);
}
hitsbarChart.on('preRender', calc_domain);
hitsbarChart.on('preRedraw', calc_domain);
hitsbarChart.brushOn(true);
dc.renderAll();
RESEARCH
I found this example which demonstrates something different but outputs a graph with time-series as the x-axis and working brush to select a range of dates.
Also, there this bug with work-around but the work around did not work. I can't imagine that time-series data works more like an ordinal scale than a numerical scale.
Please post a fiddle if you're continuing to have trouble.
– Gordon
yesterday
Yea, i do have dc.css. from unpkg: unpkg.com/dc@3.0.4/dc.css. I will put together a fiddle and update the question. Good to know that i didn't miss something super important/fundamental ;).
– Srikar Prasad
22 hours ago
Most annoying outcome ever: In making a fiddle, it seems to work perfectly....jsfiddle.net/srikasip/Lhatm67n/26
– Srikar Prasad
21 hours ago
Ha, yes you often solve the problem in the course of creating a self-contained example. It's a devious pedagogical technique. Now you just need to figure out what's different between your actual app and the fiddle :)
– Gordon
21 hours ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Should work! Indeed a time-scale is not ordinal at all. No interaction at all? No crosshair? Do you have dc.css?
– Gordon
2 days ago