在d3

Question

我正在想象d3人之间关系的图表。所有节点都连接到单个中心节点，然后与其他节点建立关系。我已经掌握了基础知识，但我正在努力研究如何设置linkDistance，linkStrength，gravity和charge等参数。

每条边具有0-5的等级，然后我使用逆线性标度来计算linkDistance。主要问题是要正确表示关系。中心节点似乎远远超过任何其他节点，即使它与其他节点具有最短的linkDistance。我也发现很难找到合适的设置来让节点相距适当的距离。

var h = 500, w = 1000

var color = d3.scale.category20()

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

queue()
    .defer(d3.json, "nodes.json")
    .defer(d3.json, "links.json")
    .await(makeDiag);


function makeDiag(error, nodes, links, table) {
    links = links.filter(function(link) {
        if (link.value) return true
    })

    var scale = d3.scale.linear().domain([0,5]).range([20,0])

    var edges = svg.selectAll("line")
                    .data(links)
                    .enter()
                    .append("line")
                    .style("stroke", "#ccc")
                    .style("stroke-width", 1)

    /* Establish the dynamic force behavor of the nodes */
    var force = d3.layout.force()
                    .nodes(nodes)
                    .links(links)
                    .size([w,h])
                    .linkDistance(function(d) { 
                        if (d.value == 0) return null
                        console.log('in',d.value,'out',scale(d.value))
                        return scale(d.value)
                    })
                    .charge(-1400)
                    .start();
    /* Draw the edges/links between the nodes */
    var texts = svg.selectAll("text")
                    .data(nodes)
                    .enter()
                    .append("text")
                    .attr("fill", "black")
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "10px")
                    .text(function(d) { return d.name; });

    var nodes = svg.selectAll("circle")
                    .data(nodes)
                    .enter()
                    .append("circle")
                    .attr("r", function(d,i) { return 20 })
                    .attr("opacity", 0.7)
                    .style("fill", function(d,i) { return color(i); })
                    .call(force.drag);

    /* Draw the nodes themselves */                

    /* Run the Force effect */
    force.on("tick", function() {
               edges.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; });

               nodes.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; })

               texts.attr("transform", function(d) {
                        return "translate(" + (d.x - 12.5) + "," + (d.y + 5) + ")";
                });


            });
};

jsFiddle full screen result