简单的colission例子与g组？

Question

简单碰撞示例，使用g组？

大家好，我测试了这个例子：

1- http://bl.ocks.org/mbostock/3231298 - 此示例使用不可见的圆圈来生成力。

2- http://bl.ocks.org/mbostock/1747543 - 此示例使用中心圆圈进行力布局

此示例始终使用圆圈。

我的想法是使用具有碰撞力的饼图，但我找不到一个简单的例子。

我使用这种结构：

chart_vars_object.svg = d3.select(".canvas_svg").append("svg")
            .attr({
                "width": general_vars_object.width,
                "height":  general_vars_object.height
            })

        var nodes = chart_vars_object.svg.selectAll(".pie")
            .data(chart_vars_object.json_init_data)
            .enter()
            .append("g")
            .attr("class", function(d) {
                return "pie pie_id_" + d.hash_chart_id
            })
            .attr("width", chart_vars_object.general_radius * 2)
            .attr("height", chart_vars_object.general_radius * 2)
            .attr("hash_link", function(d) {
                return d.hash_link
            })
            .call(chart_vars_object.force.drag);

chart_vars_object.force.on("tick", function(e) {
            chart_vars_object.svg.selectAll(".pie")
                .attr("transform", function(d, i) {
                    return "translate(" + Math.round(d.x) + "," + Math.round(d.y) + ")";
                });
        });

    //CREATE ARC GROUP's
        var g = nodes.selectAll(".arc")
            .data(function(d) {
                return chart_vars_object.pie(d.hash_taggeds);
            })
            .enter().append("g")
            .attr("class", "arc_group")
            .attr("hash_type", function(d, i) {
                if (i == 0 ) {
                    return "article";
                }
                if (i == 1 ) {
                    return "image";
                }
                if (i == 2 ) {
                    return "video";
                }
            })
            .on("click", function() {
                d3.select(this).select('.arc')
                alert('Abro el Has Tag');
            })
            .on("mouseover", function() {
                d3.select(this).select('.arc')
                    .classed("active", true )
            })
            .on("mouseout",  function() {
                d3.select(this).select('.arc')
                    .classed("active", false)
            });

    //CREATE PATHS WITH ARC
        chart_vars_object.path = g.append("path")
            .attr("class","arc")
            .style({'cursor': 'pointer', 'opacity': '0.9'})


        chart_vars_object.path.transition()
            .duration(20)
            .attr("fill", function(d) {
                return chart_vars_object.color(d.data.hash_taggeds_name);
            })
            .attr("d", chart_vars_object.arc)
            .each(function(d) {
                this._current = d;
            });

有什么建议吗？