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

Question

I need to make a graph representation where every node is connected to each other. 我需要在每个节点相互连接的地方做一个图形表示。 I don't need to show de links visually and I need to represent accurately the distance between every node. 我不需要直观地显示链接，也不需要准确表示每个节点之间的距离。 Until now, I tried to use the d3.js, but I didn't succeed. 到目前为止，我一直尝试使用d3.js，但没有成功。

I have this .json: 我有这个.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}
]
}

One node is connected to all the others, and the link value is bidirectional (0 is X far from 1, so 1 is also X far from 0). 一个节点与所有其他节点相连， link value是双向的 （0是X远离1，所以1也是X远离0）。

I need to represent this .json in a graph (like Force-Directed Graph ) but the best i could do was this . 我需要在图表中表示此.json（如“ 力导向图” ），但是我能做的最好的就是这个。 Its only problem is that I wasn't able to make link value work as distance. 唯一的问题是我无法使link value作为距离起作用。

My code (that is not so useful) is here: 我的代码（不是那么有用）在这里：

<!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: I can change the distance later to be easier to see the difference between the nodes, since all distances are 9,something. PS：我可以稍后更改距离，以便更轻松地查看节点之间的差异，因为所有距离均为9。

Answer 1

Ok, I made some changes in the code (and in the .json), but the important part of the code is below 好的，我在代码（和.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));

On d.value d is the link, value is the distance and the *5000 was for visualization purpose. 在d.value d是链接，值是距离和*5000是可视化的目的。 With the other changes I've made in the .json and in the css, my graph is like this: Graph 随着我在上传.json并在CSS提出的其他修改，我的图是这样的：图

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-06-11 02:25:45

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-06-11 02:25:45

解决方案1
0 已采纳 2018-06-11 02:25:45