该模式允许单个组件对象通过将其连接到数据来重复使用多个选择;例如

var chart = myChart();

d3.select("div.chart")
  .data(data)
  .call(chart);

我的组件实现如下所示：

function myChart() {

    function my(selection) {
        selection.each(function(d,i) {

            // generate chart here
            // `d` is the data,`i` is the index,`this` is the element

            var state = false;

            var circle = d3.select(this).append("circle")
                .attr("r","10")
                .style("fill","#000")
                .on("click",toggleState);

            function toggleState() {
                // this function updates the current instance trapped by this closure
                (state = !state)
                    ? circle.style("fill","#fff")
                    : circle.style("fill","#000");
            }
        });
    }

    my.toggleState(i) {
        // How do I access the `i`th instance of the component here?
    }

    return my;
}

我想要实现的是允许调用者在给定索引的情况下操作该组件的实例.例如,如果上面的选择器div.chart返回一个包含两个元素的选择,我想调用chart.toggleState(1)并让它更新选择中的第二个div.

所以我不会混淆任何人为什么我要这样做,调用者需要将两种类型的组件同步在一起.想象一下,我有一个由圆圈表示的组件和另一个由矩形表示的组件.这两个组件必须是独立的,并且彼此不相关.我需要能够创建4个圆和4个矩形,当我单击一个矩形时,我希望能够根据索引顺序更新相应的圆.我已经想出如何从一个组件引发事件(d3.dispatch)并提供当前索引作为事件中的参数,但我还没有弄清楚如何在给定索引的情况下调用组件的特定实例.