Geek asks and answers

D3.js Force Chart is now an application with various forms of symbols

I created a force chart application.

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

I want to be able to define different shapes and maybe even change the background images for certain custom images. I know the def template method is the best way to do this. How to create a function to control the form of a node?

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);
                        })
+3
source share
2 answers

enter image description here

Here is the last example - I clicked on the transform attributes on the output so that the shapes fly left and up - to improve / clear the code - any help from anyone to make it more efficient?

** LAST CODE - 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();
+1
source

, " ". , - .

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
0

More articles:


All Articles