Question

我已经建立了一个力图应用程序。

我希望能够定义不同的形状，甚至可以更改特定用户图像的填充背景。我知道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

enter image description here

这是最新的例子 - 我已经在退出处推动了转换属性，让形状向左上方移动 - 热衷于增强/清理代码 - 任何人都可以提高它的效率吗？

**最新代码 - 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();

Answer 2

我修改了示例以开始模仿“在线”应用程序。我希望通过符号来表示用户，并让符号倾向于中心 - 就像示例一样。

http://jsfiddle.net/NYEaX/231/

我切换了数据并设法更新了力图 - 但它的捕捉而不是淡入和淡出符号，没有万有引力 - 在启动或更新时。

这是当前的情节代码

    //__morph plots
    var plots = this.vis.selectAll("path")
        .data(this.nodes)

    // Enter
    plots.enter()
        .append("svg:path")
        .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(this.force.drag);


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


    // Exit
    plots.exit()
            .transition()
            .duration(250)
            .remove();
    //__morph plots

d3.js力图在线现在app具有不同的符号形状

2 个答案: