-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Padding method make distinct from Margin #35
Comments
Is this some code you can share? I ran into a race condition when trying to get this to work originally. Essentially if the user specifies an outer width or height for the chart then the inner chart dimensions are determined by subtracting the margin from the outer values. If the padding is configured later then the margin values are now invalid and I don't have a mechanism inside d4 to invalidate those values based on a later change. If you've cracked that nut i'd be happy to integrate that change. Additionally, the larger issue of making certain variable changes dependent on other variables is something I need to solve in general especially as we get into more complex charting types. |
The way we implemented it leaves the chart size calculations untouched (for better or for worse) We added the methods to the chart then we changed the way scales are calculated https://github.com/yanofsky/d4/blob/master/src/builders/scales.js#L14-L20 (we also changed the way axes position |
@yanofsky I've been giving this some thought and I think the way to handle this is to add a reactive programming component to base which will allow you to assign data dependencies to variables. For example if the inner width of the chart area is effected by the padding and margin then any change to those should cause a recalculation. Something like this: d4.when(['padding', 'margin'], function (padding, margin) {
// recalculate the available visual space for the chart.
}); This proposed approach is based off of @curran's model library https://github.com/curran/model |
That looks like a good solution, but shouldn't it be applied to It would also be convenient if you could update a single property of margin/padding using this method e.g. chart.when(['padding', 'margin'], function (padding, margin) {
// recalculate the available visual space for the chart.
});
chart.when("paddingLeft", function (paddingLeft) {
// recalculate the available visual space for the chart.
});
chart.set({
margin: {top:10, right: 10, bottom: 10, left: 10},
padding: {top:0, right: 0, bottom: 0, left: 0}
});
chart.set({
paddingLeft: 10
})
console.log(chart.padding())
// {top:0, right: 0, bottom: 0, left: 10} |
@yanofsky agreed, my thought was that it would happen transparently inside base when a user used one of the accessors like With that said there is nothing to say we could not expose a
|
awesome! |
yeah now i just need to write it ;-) |
Here's an example that might help Also, here's "when" formulated as an extension to Backbone (called "wire" Good luck with this work, looking forward to seeing how it goes. On Thu, Mar 12, 2015 at 8:00 AM, Mark Daggett notifications@github.com
|
We use margin to define the space between the edge of the chart and the next closest item: the credit line the legend, the axis etc.
We use padding to define the space between the margin and the chart area.
We also have a method of
extraPadding
so that we can add or subtract from the default padding without modifying it.The text was updated successfully, but these errors were encountered: