Support for the d3 margin convention

[peteb4ker]

Hi all,

I've implemented a changeset for d3.chart.base library to support the d3 margin convention, changeset available here:

• https://github.com/peteb4ker/d3.chart.base/commit/e269b577304d15b645d00b655566c8ef7721d564

This changeset adds an additional method to d3.chart.base, applyMarginConventions() which creates a margined inner base container inside the existing base, then uses this inner container for width and height references.

I've been able to use this for an internal project with a good level of success. I chatted with @iros briefly about this in January who pointed me to this list (Thanks!). With all this in mind, some questions:

1. Does anyone else implement anything else like this in their own d3.chart projects, and if so, what method is used?
2. Is this a feature that would be useful for the community integrated within the core d3.chart.base class?
3. I recognize that the changeset linked to above is a first-step in this direction. Does anyone have any comments on the method / potential improvements / risks?

Cheers,

Pete

[samselikoff]

I've implemented something similar, see here: https://gist.github.com/samselikoff/27152ff2d1d7c4af7ab8. I did find I needed the outer width/height on occasion, so I added those methods. Glancing over the file you posted I didn't see those, but I don't have time right now to dig in detail.

I definitely think this would be useful to have in the base class. By core, do you mean it will be included in d3.chart? Are there plans for this?

Great work!

[knuton]

Ultimately this seems to be mostly relevant to d3.chart.base (see also Sam’s earlier iros/d3.chart.base#6), but probably the discussion has more visibility here.

Regarding @peteb4ker's questions:

Does anyone else implement anything else like this in their own d3.chart projects, and if so, what method is used?

Yes, we do. We subclass BaseChart to provide further basic features. We don't currently use the margin convention precisely, as we don't create an inner G container. Partly, I think, because we create those for each d3.chart layer anyway. We drew inspiration from the box model (it's kind of IE-style, but not really either), with width, height, margin and padding. There are getters and setters for all of those, and getters for plot width and plot height, which refers to the drawing (plotting) area.

Is this a feature that would be useful for the community integrated within the core d3.chart.base class?

Certainly.

I recognize that the changeset linked to above is a first-step in this direction. Does anyone have any comments on the method / potential improvements / risks?

I think the method of appending an inner G container is fine, though I wouldn't retire the base element quite as much (oldBase). Instead, I'd just leave the base element as it is, and add the inner container as a new attribute, say plot. Similarly, I wouldn't change the width and height methods, but add additional methods for plot width and height.

[peteb4ker]

Finally got around to publishing our d3.chart margin component to github, available here:

• https://github.com/peteb4ker/d3.chart.plot

It takes leads from @samselikoff's and @knuton's examples above, inheriting from d3.chart.base. I've also posted 6 other d3.chart components, all documented (to various levels) at http://peteb4ker.github.io/d3.chart/doc/. Feedback / PRs are welcome.