charts - d3.js Force Chart 在线现在应用程序具有不同的符号形状

Question

我构建了一个力图应用程序。

http://jsfiddle.net/NYEaX/130/

我希望能够定义不同的形状，甚至可以更改特定用户图像的填充背景。我知道 def 模式方法 - 这是最好的方法。如何创建控制节点形状的函数？

var circle = svg.append("svg:g")
                        .attr("class", "circle")
                        .selectAll("circle")
                            .data(force.nodes())
                            .enter()
                            .append("svg:circle")
                        .attr("class", function(d) {
                            return "level"+d.level;
                        })                  
                        .attr("r", function(d) {
                            if(d.level > 0){
                                return getRadius(d);
                            }
                            else{
                                return "0";
                            }
                        })
                        .style("fill", function(d) {
                            return color(d.group);
                        })

Answer 1

这是最新的示例 - 我已在导出处插入转换属性，使形状向左和向上飞 - 渴望增强/清理代码 - 任何人的帮助可以提高效率吗？

**最新代码 -- http://jsfiddle.net/NYEaX/617/ **

 var users = that.vis.selectAll("path")
              .data(that.nodes);

        // Enter
        users
            .enter().append("path")
            .attr("id", function(d){
                return d.id;
            })
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .attr("d", d3.svg.symbol()
                  .size(function(d) { return d.size; })
                  .type(function(d) { return d.type; }))
            .style("fill", "steelblue")
            .style("stroke", "white")
            .style("stroke-width", "1.5px")
            .call(that.force.drag);

        // Update
        users
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .transition()
        .duration(500);        

        // Exit
        users.exit()
        .transition()
        .duration(750)
        .attr("transform", function(d) { return "translate(-100,100)"; })
        .remove();