.yAxisPadding: possible to add padding to one end and not the other?

855 views
Skip to first unread message

Esteban Afonso

unread,
May 22, 2014, 3:20:01 PM5/22/14
to dc-js-us...@googlegroups.com
Is it possible to add .yAxisPadding to only the top?  I am making a bubble chart where the y axis is a percentage so it goes between 0 and 1.  If I make the padding = 0 then it cuts off the top half of the bubbles that are equal to 1.0.  If I add padding then my y axis starts at a negative value rather than 0.

Thanks.

Gordon Woodhull

unread,
May 22, 2014, 5:24:20 PM5/22/14
to Esteban Afonso, dc-js-us...@googlegroups.com
Does setting the top margin instead of the padding help here?

Sounds more like you want to reserve extra space in the diagram rather than the coordinate space (if that distinction makes sense).

Esteban Afonso

unread,
May 23, 2014, 8:52:46 AM5/23/14
to dc-js-us...@googlegroups.com, Esteban Afonso


the problem is I am cutting off the top half of bubbles whose y value is 1.  i can fix this with y padding, but then my y-scale does not start at 0.0...

Gordon Woodhull

unread,
May 25, 2014, 4:15:02 PM5/25/14
to Esteban Afonso, dc-js-us...@googlegroups.com
Ah, I get it now.  For some reason, I thought that adding to the margin would allow the whole bubble to show, but it is still clipped.

I would also think that clipPadding should help, but that doesn't seem to do what it says: although this parameter affects the size of the clipping rect, the rect is still aligned to the upper left, rather than adding to the clipping area on all sides (as documented) or aligned to the origin (probably the most helpful option, at least for this use-case).

The easiest workaround I could find was simply to remove the clipping path in a renderlet:

    .renderlet(function(chart) {
        chart.svg().select('.chart-body').attr('clip-path', null)
    });

Of course, if you have dots below or left of the origin, that will probably not be acceptable.

I filed an issue here:

There was an earlier issue with a less general solution:

Esteban Afonso

unread,
Jun 2, 2014, 6:28:38 PM6/2/14
to dc-js-us...@googlegroups.com, esteban...@gmail.com
Thank you.

Christopher Meier

unread,
Jun 2, 2014, 11:27:57 PM6/2/14
to dc-js-us...@googlegroups.com, esteban...@gmail.com
.renderlet(function(chart) {
                                chart
.svg().selectAll('.chart-body').attr('clip-path', null)
                           
})

Arun Salian

unread,
Jul 28, 2015, 8:27:37 AM7/28/15
to dc-js user group, esteban...@gmail.com, the...@gmail.com
Thanks my friend.
That one really saved my time.

Arun Salian

unread,
Jul 28, 2015, 8:27:45 AM7/28/15
to dc-js user group, esteban...@gmail.com, the...@gmail.com
Reply all
Reply to author
Forward
0 new messages