D3 + AngularJS：以编程方式触发多个SVG上的画笔事件

Question

我目前正在开发Angular应用程序，我们正在使用D3进行可视化。我有一个要求，我在csv中以下列格式获取数据

y, x1, x2, x3, x4
10, 20, 30, 40, 50
11, 21, 31, 41, 51

使用Angular，我创建了一个“Scatter Plot”指令，它接受输入参数 - 数据（在CSV上解析为JSON之后），xAxisName和yAxisName。

我使用该指令绘制了4个散点图（x1 Vs y），（x2 Vs y），（x3 Vs y），（x4 Vs y）。

每个散点图都有刷子事件并且正在工作。

我的问题和要求是：当用户刷上说SVG1时，如何在SVG2，SVG3，SVG4上触发刷新用户在SVG1上选择的相同数据点？

另外，反之亦然，如果用户正在刷SVG3，我想在SVG1，SVG2和SVG4上刷新SVG3上选择的数据点。

非常感谢任何帮助。

更新1：

我在SVG上的画笔事件定义如下。如何选择所有SVG？

brush.on("brush", function()
                            {
                                var ext = brush.extent()
                                //  draw dots on scatter plot - if dot is with in brush use radius 9.5 else 3.5
                                svg.selectAll(".dot")
                                    .data(data)
                                    .attr("class", "dot")
                                    .attr("r",
                                    function (d) {if (d[xAxisName] > ext[0,0][0] && d[xAxisName] < ext[1,1][0] &&  d[yAxisName] > ext[0,0][1] && d[yAxisName] < ext[1,1][1] )
                                        return 9.5;
                                    else
                                        return  3.5;}  )
                                    .attr("cx", xMap)
                                    .attr("cy", yMap)
                                    .style("fill", function (d) {
                                        if (d[xAxisName] > ext[0,0][0] && d[xAxisName] < ext[1,1][0] &&  d[yAxisName] > ext[0,0][1] && d[yAxisName] < ext[1,1][1] )
                                            return "#fff";
                                        else
                                            return color(cValue(d));
                                    });