search

dc-js / dc.js

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

scatterPlot ordinal axis tick position #1135

Open alexnb opened 8 years ago

alexnb commented 8 years ago

How can I position the value points directly above the ticks (or the ticks directly under the points), using DC.js. I could not manage that, DC.js (or D3.js) positions the value points shifted to the left of the ticks, although the X-value is exactly the tick value.

See jsfiddle: http://jsfiddle.net/bourbert/59Lmt98w/

gordonwoodhull commented 8 years ago

That is so wrong.

image

I think the scatter plot has not been used all that much with an ordinal axis.

rrameshkumar76 commented 7 years ago

I am also facing this same issue. For now I just use a composite chart with a scatter chart as a single compose and this fixes the issue with ordinals data for me.

AbhiramE commented 7 years ago

Is this issue fixed?

alexnb commented 6 years ago

I updated my original jsfiddle to work with dc.js 3.0.1, the issue is still there.

rrameshkumar76 commented 6 years ago

Looks like there is a new PR https://github.com/dc-js/dc.js/pull/1361 for scatter plots. I will also check if this works with the above PR.

gordonwoodhull commented 6 years ago

You can work around this by setting

scatter._rangeBandPadding(1);

Not sure why this would happen automatically for a composite chart. I'm also not entirely sure why it works - I'd be hesitant to "fix" the scatter plot this way without understanding why.

alexnb commented 6 years ago

@gordonwoodhull @rrameshkumar76 Thank you for quick replies.

I could test that calling

scatter._rangeBandPadding(1);

fixes this issue for scatterPlot, lineChart displayed alone as well as in composite / series chart (there it must be called on the composite/series parent chart)

@rrameshkumar76 BTW, I also could not fix the issue by just using the composite chart, see http://jsfiddle.net/bourbert/buy69azc/3/

gordonwoodhull commented 6 years ago

I can see how putting a blank line chart in a composite with a scatter plot could fix this, since a composite chart and all of its children share the same scale. This ends up calling scaleBand.paddingInner on the scale.

Why the axis does not appear to use the same scale (or same scale, different settings) still confuses me.

rrameshkumar76 commented 6 years ago

@alexnb Just checked I use ._rangeBandPadding(1) in compose chart. Please see http://jsfiddle.net/rrameshkumar76/fjrozda3/2/ Same as mentioned by @gordonwoodhull and confirmed by you. But now realizing that I can remove compose chart and set this setting on Scatter itself based on above comments.