search

dc-js / dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
Apache License 2.0
7.41k stars 1.81k forks source link

composite chart with ordinal (stacked) bar and line bar spacing issue #1827

Open nomego opened 3 years ago

nomego commented 3 years ago

I implemented (https://github.com/nomego/dc-owc) a composite chart with a stacked, ordinal bar chart and a line chart and the spacing between the bars are too tight and overlapping. Switching to scaleLinear and centerBar as in http://dc-js.github.io/dc.js/examples/composite-bar-line.html works but then half of the first and last bars are cut off, as in the example.

Is there any way to use the combo of composite + bar + ordinal ?

image

gordonwoodhull commented 3 years ago

With scaleLinear and centerBar and elasticX(true) you can also set .xAxisPadding(0.5) to get the desired result.

There's always a way with dc.js... it may be hacky and the library is not able to do a lot of things automatically, but there is always a way...

gordonwoodhull commented 3 years ago

On the composite bar/line example, changing

-        .x(d3.scaleLinear().domain([2.9,16.1]))
+        .x(d3.scaleLinear()).xAxisPadding(0.5).elasticX(true)

produces the desired result:

image

I'm updating the example, since I'm not sure why the domain was hard-coded previously.

nomego commented 3 years ago

Ok, thanks! No reason to fix ordinal in composite? Are these two setups interchangable (ordinal vs linear+padding+elastic)? Why use one over the other?

nomego commented 3 years ago

Hmm not using xUnits ordinal seems to prevent clicking on the bars to add a filter, even if addFilterHandler is used?

gordonwoodhull commented 3 years ago

You're right, ordinal composite is one of many things that would be nice to fix in dc.js. The workaround for most things that don't work with ordinal scales is to use continuous scales, but we still want to fix them.

Ordinal and continuous scales are not interchangeable, in fact the coordinate grid mixin, and especially the bar chart, checks whether xUnits is ordinal many places and uses different logic.

As you note, one of the obvious differences is selection via brush or clicking.

nomego commented 3 years ago

If I want to stick to ordinal for the clickability, how can I affect the width calculation? CSS margins, hard-coded width values somewhere or what else?

nomego commented 3 years ago

I found this answer you gave a while back https://stackoverflow.com/a/33267720/3489298 that solved it, but it feels like a bad way to go :) Also issue #678 is about the underlying problem

gordonwoodhull commented 3 years ago

Yes, it is bad and yes it is the best workaround I know of currently.

You could see if the changes suggested by @jcamins in #678 help.