标签：javascript d3-js graph force-layout

我有一些数据,我试图用D3力布局显示.如果这是一个天真的问题,或者我在问题标题中使用的术语不准确,请道歉.我找不到我想要的答案.

我做了一个小提琴,展示了我在这里的内容：

http://jsfiddle.net/stevendwood/f3GJT/8/

在示例中,我有一个节点(0),它有很多链接.另一个节点(16)具有较少量的链路,0和16都连接到15.

所以我想要的是0和16是小集群,它们的连接节点出现在它们周围的一个漂亮的圆圈中.

我徒劳地尝试根据链接的数量来定制费用,但我认为我想要做的是以某种方式使节点更多地吸引他们所连接的节点,而不是吸引他们没有连接到的节点.

如果可能,我想要这样的东西：

var w = 500,
h = 500,
nodes = [],
links = [];

/* Fake up some data */
for (var i=0; i<20; i++) {
    nodes.push({
        name: ""+i
    });
}

for (i=0; i<16; i++) {
    links.push({
        source: nodes[i],
        target: nodes[0]
    });
}

links.push({
     source: nodes[16],
     target: nodes[15]
});

for (i=17; i<20; i++) {

    links.push({
        source: nodes[i],
        target: nodes[16]
    });
}

var countLinks = function(n) {
    var count = 0;
    links.forEach(function(l) {
        if (l.source === n || l.target === n) {
            count++;
        }
    });

    return count;
}

/////////////////////////////////////////////

var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .gravity(0.05)
    .charge(function(d) {
        return countLinks(d) * -50;     
     })
    .linkDistance(300)
    .size([w, h]);


 var link = vis.selectAll(".link")
        .data(links)
        .enter().append("line")
        .attr("class", "link")
        .attr("stroke", "#CCC")
        .attr("fill", "none");

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

node.append("svg:circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 14)
    .style("fill", "#CCC")
    .style("stroke", "#AAA")
    .style("stroke-width", 1.5)

node.append("text").text(function(d) { return d.name; })
    .attr("x", -6)
    .attr("y", 6);

force.on("tick", function(e) {
    node.attr("transform", function(d, i) {
        return "translate(" + d.x + "," + d.y + ")"; 
    });

    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; }) 
});

force.start();

解决方法:

在宣布力布局时,为什么要省略链接？如果你重新添加它们,它看起来更接近你想要的：

var force = d3.layout.force()
    .nodes(nodes)
    //.links([])
    .links(links)
    .gravity(0.1)
    .charge(-400)
    .linkDistance(75)
    .size([w, h]);

http://jsfiddle.net/f3GJT/11/

标签：javascript,d3-js,graph,force-layout
来源： https://codeday.me/bug/20190831/1779404.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。