javascript - dc.js barChart bars overlapping - Stack Overflow

This is my datetime barChart. When I use a fiddle (see here) to try and replicate the issue, it works as intended. NB : The data takes a while (~30sec) to load from github.

Here 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);

Am I missing something obvious here ? If not, any ideas where I should start debugging ? I have spent a fair amount of time on this one and I can't find anything wrong.

EDIT: when I remove the .xUnits instructions, I get very skinny bars but well placed along the axis. That leads me to think that there is something wrong with the calculation of the width of the bars. I don't know how to debug that specific calculation though. If anyone knows, I'll be happy to dig into it.

EDIT2 : The width attribute of the <g class="chart-body"><g class="stack _0"><rect class="bar"></rect></g></g> elements within the svg are all set to a wrong value. If anyone could point me to where this is calculated in the d3 library, I could maybe take it from there.

EDIT3: I found the source of my issue. The width of the bars is incorrect because when calculateBarWidth() has run once to instantiate the graph, it doesn't run anymore even when dc.redrawAll() is called. In my case I successively add chunks of records to my crossfilter and redraw the graphs. The new question is 'How do I force calculateBarWidth() to rerun ?'

This is my datetime barChart. When I use a fiddle (see here) to try and replicate the issue, it works as intended. NB : The data takes a while (~30sec) to load from github.

Here 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);

Am I missing something obvious here ? If not, any ideas where I should start debugging ? I have spent a fair amount of time on this one and I can't find anything wrong.

EDIT: when I remove the .xUnits instructions, I get very skinny bars but well placed along the axis. That leads me to think that there is something wrong with the calculation of the width of the bars. I don't know how to debug that specific calculation though. If anyone knows, I'll be happy to dig into it.

EDIT2 : The width attribute of the <g class="chart-body"><g class="stack _0"><rect class="bar"></rect></g></g> elements within the svg are all set to a wrong value. If anyone could point me to where this is calculated in the d3 library, I could maybe take it from there.

EDIT3: I found the source of my issue. The width of the bars is incorrect because when calculateBarWidth() has run once to instantiate the graph, it doesn't run anymore even when dc.redrawAll() is called. In my case I successively add chunks of records to my crossfilter and redraw the graphs. The new question is 'How do I force calculateBarWidth() to rerun ?'

• javascript
• d3.js
• visualization
• data-visualization
• dc.js

Share Follow edited Feb 8, 2017 at 14:51 CommunityBot 111 silver badge asked Mar 17, 2014 at 7:25 ChapoChapo 2,55344 gold badges3535 silver badges7070 bronze badges 8

• What's the difference between your non-working version and the working jsfiddle? – Lars Kotthoff Commented Mar 17, 2014 at 11:21
• No differences. That's what's driving me mad. I have even made sure the sources are the same by redownloading them. – Chapo Commented Mar 18, 2014 at 1:39
• Could you maybe point me to where the width attribute of the <g class="chart-body"><g class="stack _0"><rect class="bar"></rect></g></g> is calulated so I can see where it goes wrong within d3 ? – Chapo Commented Mar 18, 2014 at 2:08
• Maybe it's some CSS that's missing? – Lars Kotthoff Commented Mar 18, 2014 at 9:06
• @LarsKotthoff Thanks for the tip but same thing for the css : I pointed directly to the one used on the dc.js website... – Chapo Commented Mar 18, 2014 at 9:12

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 6

.on("preRedraw", function (chart) {
        chart.rescale();
    });
    chart.on("preRender", function (chart) {
        chart.rescale();
    });

The answer es from here.

I think you are looking for barChart.calculateBarWidth. (src/bar-chart.js if you're considering submitting a PR ;)

There have been other bugs reported against it recently to do with ordinal bar charts:

https://github./dc-js/dc.js/issues/533

I don't know if there is also a bug with dates. It seems odd to me that the same code would work in a fiddle but not in your page... that's pretty rare.