105 |
106 | Using this component abstraction, you can easily encapsulate data-driven user interface components as conceptual "boxes-within-boxes", cleanly isolating concerns for various levels of your DOM tree. This component abstraction is similar in concept and functionality to [React Stateless Functional Components](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.dc21r5uj4). Everything a component needs to render itself and interact with application state gets passed down through the component tree at render time. Components don't store any local state; this is the main difference between d3-component and the [Towards Reusable Charts](https://bost.ocks.org/mike/chart/) pattern. No special treatment is given to events or event delegation, because the intended use is within a unidirectional data flow architecture like [Redux](http://redux.js.org/).
107 |
108 | ## Installing
109 |
110 | If you use NPM, `npm install d3-component`. Otherwise, download the [latest release](https://github.com/curran/d3-component/releases/latest). You can also load directly from [unpkg.com](https://unpkg.com) as a [standalone library](https://unpkg.com/d3-component@1). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
111 |
112 | ```html
113 |
114 |
115 |
118 | ```
119 |
120 | ## API Reference
121 |
122 | **Note:** There was a recent [major version release](https://github.com/curran/d3-component/releases/tag/v3.0.0), and along with it there were substantial [API Changes](https://github.com/curran/d3-component/issues/70).
123 |
124 | In summary, the API looks like this:
125 |
126 | ```js
127 | var myComponent = d3.component("div", "some-class")
128 | .create((selection, d, i) => { ... }) // Invoked for entering component instances.
129 | .render((selection, d, i) => { ... }) // Invoked for entering AND updating component instances.
130 | .destroy((selection, d, i) => { ... }); // Invoked for exiting instances, may return a transition.
131 |
132 | // To invoke the component,
133 | d3.select("body") // create a selection with a single element,
134 | .call(myComponent, "Hello d3-component!"); // then use selection.call().
135 | ```
136 |
137 | To see the full API in action, check out this ["Hello d3-component" example](https://bl.ocks.org/curran/c3d9783e641636479fa8e07a480e7233).
138 |
139 | 
22 |
23 | 
31 |
32 | 
40 |
41 | 
51 |
52 | 
58 |
59 | 
69 |
70 | 
78 |
79 | 
85 |
86 | 
92 |
93 | 
101 |
102 |