d3.js - How to create a reusable component in D3 with an API that manipulates each instance of the component? -
Mike's writing is an excellent article in D3. Describes how to make article components configurable, and how a component is implemented in a selection.
Pattern allows a component component to be reused with multiple selections by joining the data; E.g.
var chart = myChart (); D3.select ("div.chart"). Data (data) .Col (chart); My component implementation looks like the following:
function myChart () {function my (selection) {selection.each (function (d, i ) {// Generating chart is `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` " Style ("fill", "# 000") .on ("click", togglestate); (State =! State)? Circle.style ("Fill", "#FFF"): circle.style ("Fill", "# 000");}}); } My.toggleState (i) {// How do I get the `i`th example of the component? } My return; } What I would like to achieve, that is, allow the caller to manipulate this index in the example of its index. For example, if there is two elements in the selection selector div.chart , then I want to call the chart.toggleState (1) and select it into 2 div . Just because I do not confuse anyone why I am trying to do this, two kinds of components have to be synchronized together to make a call. Imagine that I have a component that is represented by a circle and the other component which is represented by a rectangle. Both components should be independent and not tied to each other. I need to be able to create 4 circles and 4 rectangles, and when I click on a rectangle, I want to be able to update the corresponding circle based on the index order. I have already figured out how to increase incidents from a component (D3 DISPECT) and present the current index as a parameter in the event, but I have not thought about how a specific example of a pointer I think that the easiest way is to give the same class to each component. Then when you call chart.toggleState (1) , you can d3.selectAll ('component'). Each (function (D, I) {if (i == index);});
Comments
Post a Comment