force graph

ajaxrequest.js

function renderConfidants(dom){
    var data = JSON.parse(currentProfile.confidants);
    if($.isEmptyObject(data)){
        return;
    }
    var formatData = {"nodes":[], "links":[]};
    formatData.nodes.push({
        "type" : 3,
        "img_href" : 'http://tp2.sinaimg.cn/' + currentProfile.uid + '/50/0/0',
        "width": 50,
        "height": 50
    });
    if(data.f && data.f.length){
        $.each(data.f, function(key, value){
            var obj = {};
            obj.name = value;
            obj.type = 1;
            obj.img_href = "/resources/images/w_icon.png";
            obj.width = 35;
            obj.height = 35;
            formatData.nodes.push(obj);
        });
    }
    if(data.m && data.m.length){
        $.each(data.m, function(key, value){
            var obj = {};
            obj.name = value;
            obj.type = 2;
            obj.img_href = "/resources/images/m_icon.png";
            obj.width = 35;
            obj.height = 35;
            formatData.nodes.push(obj);
        });
    }
    for(var i=1,len=formatData.nodes.length; i<len; i++){
        var link = {};
        link.source = 0;
        link.target = i;
        link.value = 30;
        formatData.links.push(link);
    }

    var w = 800,
        h = 300;

    var vis = d3.select("[data-type='content']").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    var force = self.force = d3.layout.force()
        .nodes(formatData.nodes)
        .links(formatData.links)
        .distance(110)
        .charge(-200)
        .size([w, h])
        .start();

    var link = vis.selectAll("line.link")
        .data(formatData.links)
        .enter().append("svg:line")
        .attr("class", "link")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    var node = vis.selectAll("g.node")
        .data(formatData.nodes)
        .enter().append("svg:g")
        .attr("class", "node")
        .call(force.drag);

//    node.append("circle")
//        .attr("class", function(d){ return "node type"+d.type})
//        .attr("r", function(d) { return d.value })
//        .call(force.drag);

    node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", function(d){ return d.img_href})
        .attr("x", function(d) { return "-"+d.width/2+"px"; })
        .attr("y", function(d) { return "-"+d.height/2+"px"; })
        .attr("width", function(d) { return d.width + "px"; })
        .attr("height", function(d) { return d.height + "px"; })
        .on('click',function(d){
            if(d.name){
                $.get("/search_fans/ajax/getuserinfo", {nickname:encodeURIComponent(d.name)}, function(result){
                    if (result.success) {
                        var uid = result.user.id;
                        var nickname = result.user.screenName;
                        var profileDetailDom = $("#result_container").find("[data-type='profileDetail']");
                        profileDetailDom.find("[data-type='tablist']").find("dl").hide();
                        profileDetailDom.find("[data-type='content']").data("tab","");
                        profileDetailDom.find("[data-type='content']").html('');
                        profileClear(profileDetailDom);
                        loadingProfile(profileDetailDom, uid, nickname);
                        buildProfile(profileDetailDom, uid, nickname);
                    }
                });
            }
        });

    node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 16)
        .attr("dy", ".35em")
        .text(function(d) { return d.name });

    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
}