D3.js使用Json强制定向图 - 创建指定所有节点的链接距离的图形

时间:2018-06-10 21:24:44

标签: javascript json d3.js graph

我需要制作一个图形表示,其中每个节点都相互连接。我不需要在视觉上显示de链接,我需要准确表示 每个节点之间的距离。到现在为止,我试图使用d3.js,但我没有成功。

我有这个.json:

{
"nodes": [
    {"id": "0", "group": 0},
    {"id": "1", "group": 1},
    {"id": "2", "group": 2},
    {"id": "3", "group": 3},
    {"id": "4", "group": 4},
    {"id": "5", "group": 5},
    {"id": "6", "group": 6},
    {"id": "7", "group": 7},
    {"id": "8", "group": 8},
    {"id": "9", "group": 9}
],
"links": [
    {"source": "0", "target": "1", "value": 9.659706705913175},
    {"source": "0", "target": "2", "value": 9.666414637924841},
    {"source": "0", "target": "3", "value": 9.643118100155178},
    {"source": "0", "target": "4", "value": 9.579570167640641},
    {"source": "0", "target": "5", "value": 9.613064963616871},
    {"source": "0", "target": "6", "value": 9.598967569046962},
    {"source": "0", "target": "7", "value": 9.560026622640917},
    {"source": "0", "target": "8", "value": 9.299886122464947},
    {"source": "0", "target": "9", "value": 9.629991944483255},
    {"source": "1", "target": "2", "value": 9.848134605803114},
    {"source": "1", "target": "3", "value": 9.812427318665073},
    {"source": "1", "target": "4", "value": 9.69483085400529},
    {"source": "1", "target": "5", "value": 9.731495828694824},
    {"source": "1", "target": "6", "value": 9.730700787649178},
    {"source": "1", "target": "7", "value": 9.673230725067242},
    {"source": "1", "target": "8", "value": 9.365051596704303},
    {"source": "1", "target": "9", "value": 9.763021979662872},
    {"source": "2", "target": "3", "value": 9.816292987216533},
    {"source": "2", "target": "4", "value": 9.71490691310781},
    {"source": "2", "target": "5", "value": 9.756176405714147},
    {"source": "2", "target": "6", "value": 9.7487211470593},
    {"source": "2", "target": "7", "value": 9.703289345012967},
    {"source": "2", "target": "8", "value": 9.374210446522804},
    {"source": "2", "target": "9", "value": 9.784250043884768},
    {"source": "3", "target": "4", "value": 9.68811714172042},
    {"source": "3", "target": "5", "value": 9.71866887779505},
    {"source": "3", "target": "6", "value": 9.721090767288228},
    {"source": "3", "target": "7", "value": 9.66048909877906},
    {"source": "3", "target": "8", "value": 9.363363997692563},
    {"source": "3", "target": "9", "value": 9.750129465645351},
    {"source": "4", "target": "5", "value": 9.662873053147113},
    {"source": "4", "target": "6", "value": 9.64183710027379},
    {"source": "4", "target": "7", "value": 9.594608604650613},
    {"source": "4", "target": "8", "value": 9.321567614595686},
    {"source": "4", "target": "9", "value": 9.66279803886811},
    {"source": "5", "target": "6", "value": 9.66515196803137},
    {"source": "5", "target": "7", "value": 9.641598139328215},
    {"source": "5", "target": "8", "value": 9.346524923203926},
    {"source": "5", "target": "9", "value": 9.691701447072807},
    {"source": "6", "target": "7", "value": 9.643314754454822},
    {"source": "6", "target": "8", "value": 9.336193491649157},
    {"source": "6", "target": "9", "value": 9.701700199061596},
    {"source": "7", "target": "8", "value": 9.360627298706392},
    {"source": "7", "target": "9", "value": 9.661840242067525},
    {"source": "8", "target": "9", "value": 9.433190953846434}
]
}

一个节点连接到所有其他节点,link value双向(0是远离1的X,所以1也是远离0的X)。

我需要在图表中表示这个.json(比如Force-Directed Graph),但我能做的最好的是this。它唯一的问题是我无法让link value作为距离工作。

我的代码(不太有用)在这里:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>

    .links line {
        stroke: #999;
        stroke-opacity: 0.0;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1.5px;
    }

</style>
</head>
<body>
<div style="text-align:center">
    <svg width="960" height="600"></svg>
</div>
<script src='http://d3js.org/d3.v4.min.js'></script>
<script>

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var color = d3.scaleOrdinal(d3.schemeCategory20);


    d3.json("data.json", function(error, graph) {
        if (error) throw error;

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

        var simulation = d3.forceSimulation()
            .force("charge", d3.forceManyBody())
            .force("link", d3.forceLink(graph.links.value))
            .force("center", d3.forceCenter(width / 2, height / 2));

        var node = svg.append("g")
                        .attr("class", "nodes")
                        .selectAll("circle")
                        .data(graph.nodes)
                        .enter().append("circle")
                        .attr("r", 5)
                        .attr("fill", function(d) { return color(d.group); })
                        .call(d3.drag()
                                    .on("start", dragstarted)
                                    .on("drag", dragged)
                                    .on("end", dragended));

        var text = svg.append("g")
                        .attr("class", "labels")
                        .selectAll("text")
                        .data(graph.nodes)
                        .enter().append("text")
                        .attr("dx", 12)
                        .attr("dy", ".35em")
                        .text(function(d) { return d.id });

        node.append("text")
            .attr("dx", 12)
            .attr("dy", ".35em")
            .style("background-color", "green!important")
            .style("color", "green")
            .text(function(d) { return d.id });

        simulation.nodes(graph.nodes)
            .on("tick", ticked);

        simulation.force("link")
            .links(graph.links);

        function ticked() {
            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("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });

            text.attr("x", function(d) { return d.x; })
                .attr("y", function(d) { return d.y; });
        }
    });

    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

</script>
</body>

PS:我可以稍后改变距离,以便更容易看到节点之间的差异,因为所有距离都是9,某些东西。

1 个答案:

答案 0 :(得分:0)

好的,我在代码中(和.json中)做了一些更改,但代码的重要部分在下面

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().distance(function(d) {return (d.value)*5000;}).strength(0.1))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));

d.value d上是链接,值是距离,*5000用于可视化目的。通过我在.json和css中进行的其他更改,我的图形如下所示: Graph