scatterplot/bubble chart symbols being clipped

[gordonwoodhull]

I can't find a workaround presently, except for removing the clip area.

https://groups.google.com/forum/#!topic/dc-js-user-group/yvaukx41okk

Possible solutions:

• align the clip rectangle clipPadding with the origin (most useful here)
• pad evenly on all sides (as documented).
• generalize clipPadding to be more CSS-like and allow padding on each side.

[gordonwoodhull]

#440 is another solution specific to scatterplots.

[mr23]

For whatever reason I couldn't get the renderlet workaround to work on a composite barChart/lineChart.

[gordonwoodhull]

There will probably be two levels of clipping on a composite chart.

The way I figured it out was by going through the live dom editor in chrome. When I deleted the clip path attr the dots got restored.

My guess is that you'd have to remove the attr both on the composite and the scatter/bubble.

If you can't figure it out, please post a fiddle.

[mr23]

I didn't try removing the clip path on all 3 (line, bar, composite), I left out trying the bar too figuring that wouldn't affect the other two. Might give that a shot next time.

Might have to try a fiddle, I recently posted a plnkr for the first time but it didn't draw the dots (code was copy/pasted from a working 'app'). referenced in #598 (comment).

[mr23]

I had to use selectAll with a composite chart.

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

[javadoug]

The issue is the clip path needs to be translated up to cover the radius of the dot. A fix would require changing coordinate-grid-mixin.js::generateClipPath method around line 888. Add to the clip rect:
.attr('transform', 'translate(0, ' + (-_clipPadding) + ')');

I'm not sure about using minus _clipPadding as the offset. Should it be minus Math.abs(_clipPadding)? Padding is generally never a negative value. This would enforce that notion.

I'm also not sure if this fixes all graph types but this should fix the coord-grid based ones.

Finally, in order for this fix to work, the consumer has to set the clipPadding to a number large enough to cover their dot radius. The default _clipPadding is 0. And if the consumer changes the dotRadius to a value larger than the margin top will allow, then they would also have to bump up the _clipPadding and the margin top, too.

Should this fix include changing the default _clipPadding to support the default dotRadius of the line-chart lib?

Yikes, that's a lot for one little feature enhancement.

As a side note: you should be able to use this fix in a renderlet as a workaround, rather than removing the clip path.

[javadoug]

If you use this as a workaround in a renderlet, note you have to translate both x and y:
.attr('transform', 'translate(-' + _clipPadding + ', -' + _clipPadding + ')');

[gordonwoodhull]

clipPadding is fixed by #717. We could still automatically apply padding as suggested in #440.

[lastlegion]

The points are not clipped by #717 but it doesn't let you brush/filter the edge points. So while you're able to see the whole point nicely on the plot you're still not able to brush on it.

[gordonwoodhull]

@lastlegion, I take it you're talking about the case where the center of the point is right on the boundary. I guess we could either allow the brush to go to the clip boundary, or have the brush match a point when the point is right on the edge.

[lastlegion]

Yes when the point is right on the boundary. If the point is visible it should be brushable IMO.