Controlling the display of graphs with force layout without specifying x/y coordinates in nodes

问题

Take this example:

  var graph = {
        "nodes": [
            { "name": "Myriel", "group": 1 }, //0
            { "name": "Napoleon", "group": 1 }, //1
            { "name": "Mlle.Baptistine", "group": 1 }, //2
            { "name": "Mme.Magloire", "group": 1 }, //3
            { "name": "CountessdeLo", "group": 1 },//4
            { "name": "Geborand", "group": 1 }
            // { "name": "Champtercier", "group": 1 }
        ],
        "links": [
            { "source": 0, "target": 1, "value": 50},
            { "source": 1, "target": 2, "value": 50},
            { "source": 2, "target": 0, "value": 50},
            { "source": 3, "target": 4, "value": 50},
            { "source": 4, "target": 5, "value": 50},
            { "source": 5, "target": 3, "value": 50}
        ]
    } 

   var force = d3.layout.force()
        .linkDistance(function (d){
            return d.value;
        })
        .size([width, height])
        .nodes(graph.nodes)
        .links(graph.links)
        .friction(0)
        .chargeDistance(200)

   var link = svg.selectAll(".link")
        .data(graph.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function (d) {
            return Math.sqrt(d.value);
            });

    var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")

    force.on('tick', function () {
        node.attr('r', 15)
            .attr('cx', function (d) { return d.x; })
            .attr('cy', function (d) { return 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();

When I am passing in nodes with no specified x and y coordinates is there a way to control the layout of the the graphs. For example, my links above are creating two separate triangle graphs, but sometime they appear on top of each other. I'm wondering if there is a property that I can use (friction, chargeDistance, charge, etc). that would allow me to set the two triangle graphs next to each other on the same line? Or do I need to specify x and y coord to get that look? It looks like friction helps move them apart but its hard to tell.

I was also hoping to get clarifcation - does the first object in my nodes array correspond to the first object in my links array? Are they associated because they both have an index of 0 or how does that work? I'm having a hard time tracking it. Does the first nodes object have a source of 0 then and its target is the second object in the nodes array (which would have a source of 1, target 1)?

My last question is there a way to display the nodes without using "end" or "tick". I'd like for the graphs to just appear on the page when it loads but with "end" it takes too long to show and with "tick" they slide onto the page which I don't want. When I tried to add the link attr like I have in the "tick" function I get an undefined error because it can't find x and y coords.

Thanks

来源：https://stackoverflow.com/questions/35900276/controlling-the-display-of-graphs-with-force-layout-without-specifying-x-y-coord

标签

javascript

d3.js

graph

hierarchy

force-layout