javascript - 如何保持 d3.forceSimulation() 节点均匀分布而不重叠-6ren

javascript - 如何保持 d3.forceSimulation() 节点均匀分布而不重叠

转载作者：塔克拉玛干更新时间：2023-11-02 22:29:46

我正在尝试制作一个图表，其中某些节点应该在左侧，而某些节点应该在“创世节点”的右侧，它应该在我的 svg 的中心。

设置力:

d3.forceManyBody() 所以节点应该互相排斥
d3.forceLink().distance(60).strength(1) 所以链接会保持他们的长度
d3.forceCenter(width/2, height/2) 定位中心的主要节点。我也试过删除它，但只使图表出现在左上角，只有一小部分节点可见

所以最后看起来像这样:

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

设置节点:我还尝试设置属性 x 和 y，而不是 cx 和 cy，但没有任何变化。 xCenter 和 yCenter 是显示图形的 svg 中心。

node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

node.append("circle")
    .attr("r", 6)
    .attr("cx", function (d) {
       return colors(d.position*20 + xCenter);})
    .attr("cy", function (d) {return colors(yCenter);})
    .style("fill", function (d) {return colors(d.group);})

更新模拟

function ticked() {
   node
       .attr("transform", function (d) {
            return "translate(" + d.x + ", " + d.y + ")";});
}

我也试过这个，但不是运气:

function ticked() {
       node
           .attr("cx", function(d) { return d.cx; })
           .attr("cy", function(d) { return d.cy; });
    }

这就是我得到的:(

而这正是我想要的(我可以自己拖动来设置我只是希望它直接出现这样)

数据源结构:位置0表示居中，负数表示向左，正数表示向右

{
  "graphNodes": [
    {
      "id": "Q20514253",
      "label": "label",
      "description": "description",
      "group": 0,
      "position": 0
    }],
  "graphLinks": [
   {
      "source": "Q8513",
      "target": "Q20514253",
      "type": "instanceOf"
   }],
 }

=============================== 编辑 ============ ======================

位置计算:

每个节点都有一个位置编号，负数表示在左边，正数表示在右边。向左 1 级为 -1，向左 2 级为 -2。向右1级是1，向右2级是2。

X位置是这样的:X = d.position*20 + xCenter//所以每一层相隔 20 像素

Y position 我只是把 = yCenter，所以它们都是垂直居中的，然后我希望因为带电的节点会相互排斥，所以它们会均匀地垂直分布

完整的工作代码:

var nodeDescription = document.querySelector(".node-description")
var colors = d3.scaleOrdinal(d3.schemeCategory10);

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

    svg.append('defs').append('marker')
        .attrs({'id':'arrowhead',
            'viewBox':'-0 -5 10 10',
            'refX':13,
            'refY':0,
            'orient':'auto',
            'markerWidth':13,
            'markerHeight':8,
            'xoverflow':'visible'})
        .append('svg:path')
        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
        .attr('fill', '#999')
        .style('stroke','none');

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



function update(links, nodes) {

        var graphPlaceholder = document.querySelector(".graph-placeholder")
        width = graphPlaceholder.offsetWidth
        var xCenter = width/2
        height = graphPlaceholder.offsetHeight
        var yCenter = height/2

        svg
          .attr("width", width)
          .attr("height", height)

        simulation.force("center", d3.forceCenter(xCenter, yCenter));

        link = svg.selectAll(".link")
            .data(links)
            .enter()
            .append("line")
            .attr("class", "link")
            .attr('marker-end','url(#arrowhead)')

        link.append("title")
            .text(function (d) {return d.type;});

        edgepaths = svg.selectAll(".edgepath")
            .data(links)
            .enter()
            .append('path')
            .attrs({
                'class': 'edgepath',
                'fill-opacity': 0,
                'stroke-opacity': 0,
                'id': function (d, i) {return 'edgepath' + i}
            })
            .style("pointer-events", "none");

        edgelabels = svg.selectAll(".edgelabel")
            .data(links)
            .enter()
            .append('text')
            .style("pointer-events", "none")
            .attrs({
                'class': 'edgelabel',
                'id': function (d, i) {return 'edgelabel' + i},
                'font-size': 10,
                'fill': '#aaa'
            });

        edgelabels.append('textPath')
            .attr('xlink:href', function (d, i) {return '#edgepath' + i})
            .style("text-anchor", "middle")
            .style("pointer-events", "none")
            .attr("startOffset", "50%")
            .text(function (d) {return d.type});

        node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    //.on("end", dragended)
            ).on("click", function(d){
                nodeDescription.innerHTML =  d.label + ": " + d.description;
            });



        node.append("circle")
            .attr("r", 6)
            .attr("x", function (d) {return colors(d.position*20 + xCenter);})
            .attr("y", function (d) {return colors(yCenter);})
            .style("fill", function (d) {return colors(d.group);})

        node.append("title")
            .text(function (d) {return d.id;});

        node.append("text")
            .attr("dy", -9)
            .text(function (d) {return d.label;});

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

        simulation.force("link")
            .links(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("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});

        edgepaths.attr('d', function (d) {
            return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
        });

        edgelabels.attr('transform', function (d) {
            if (d.target.x < d.source.x) {
                var bbox = this.getBBox();

                rx = bbox.x + bbox.width / 2;
                ry = bbox.y + bbox.height / 2;
                return 'rotate(180 ' + rx + ' ' + ry + ')';
            }
            else {
                return 'rotate(0)';
            }
        });
    }

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

完整数据集

{
  "graphNodes": [
    {
      "id": "http://www.wikidata.org/entity/Q395",
      "label": "mathematics",
      "description": "field of study (numbers, quantity, structure, relationships, space, change)",
      "group": 0,
      "position": 0
    },
    {
      "id": "http://www.wikidata.org/entity/Q41511",
      "label": "universal language",
      "description": "hypothetical language that is supposed to have been spoken by all or most of the world's population",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q4671286",
      "label": "academic major",
      "description": "academic discipline to which a student formally commits",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q11862829",
      "label": "academic discipline",
      "description": "concentration in one academic field of study or profession",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q475023",
      "label": "exact science",
      "description": "",
      "group": 9,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q816264",
      "label": "formal science",
      "description": "disciplines concerned with formal systems, such as logic, mathematics, and game theory",
      "group": 9,
      "position": -1
    },
    {
      "id": "Mathematics",
      "label": "Mathematics",
      "description": "",
      "group": 13,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q30125896",
      "label": "scientific hypothesis",
      "description": "idea that proposes a tentative explanation about a phenomenon or a narrow set of phenomena observed in the natural world (primary features of a scientific hypothesis: falsifiability, testability)",
      "group": 6,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q2623733",
      "label": "fictional language",
      "description": "language in fictional stories",
      "group": 9,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q1047113",
      "label": "specialty",
      "description": "field limited to a specific area of knowledge",
      "group": 9,
      "position": -2
    },
    {
      "id": "Academic disciplines",
      "label": "Academic disciplines",
      "description": "",
      "group": 13,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q2465832",
      "label": "branch of science",
      "description": "field or discipline of science",
      "group": 6,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q336",
      "label": "science",
      "description": "study and knowledge",
      "group": 9,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q3968",
      "label": "algebra",
      "description": "topic in mathematics and definition is Algebra uses letters (like x or y) or other symbols in place of values, and plays with them using special rules.",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q8087",
      "label": "geometry",
      "description": "branch of mathematics that measures the shape, size and position of objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12479",
      "label": "number theory",
      "description": "branch of pure mathematics devoted primarily to the study of the integers",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12482",
      "label": "set theory",
      "description": "branch of mathematics that studies sets, which are collections of objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12483",
      "label": "statistics",
      "description": "study of the collection, organization, analysis, interpretation, and presentation of data",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q42989",
      "label": "topology",
      "description": "subfield of mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q131476",
      "label": "graph theory",
      "description": "study of graphs, which are mathematical structures used to model pairwise relations between objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q149972",
      "label": "calculus",
      "description": "branch of mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q217413",
      "label": "category theory",
      "description": "logic and mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q5862903",
      "label": "probability theory",
      "description": "branch of mathematics concerned with probability",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q1192971",
      "label": "network theory",
      "description": "study of graphs as a representation of either symmetric relations or, more generally, of asymmetric relations between discrete objects",
      "group": 1,
      "position": 2
    },
    {
      "id": "http://www.wikidata.org/entity/Q149999",
      "label": "differential calculus",
      "description": "subfield of calculus",
      "group": 1,
      "position": 2
    },
    {
      "id": "http://www.wikidata.org/entity/Q150008",
      "label": "integral calculus",
      "description": "subfield of calculus",
      "group": 1,
      "position": 2
    }
  ],
  "graphLinks": [
    {
      "source": "http://www.wikidata.org/entity/Q41511",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q4671286",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q11862829",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q475023",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q816264",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "subclassOf"
    },
    {
      "source": "Mathematics",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "CommonCategory"
    },
    {
      "source": "http://www.wikidata.org/entity/Q30125896",
      "target": "http://www.wikidata.org/entity/Q41511",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2623733",
      "target": "http://www.wikidata.org/entity/Q41511",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q11862829",
      "target": "http://www.wikidata.org/entity/Q4671286",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q1047113",
      "target": "http://www.wikidata.org/entity/Q11862829",
      "type": "subclassOf"
    },
    {
      "source": "Academic disciplines",
      "target": "http://www.wikidata.org/entity/Q11862829",
      "type": "CommonCategory"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2465832",
      "target": "http://www.wikidata.org/entity/Q475023",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q336",
      "target": "http://www.wikidata.org/entity/Q475023",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2465832",
      "target": "http://www.wikidata.org/entity/Q816264",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q475023",
      "target": "http://www.wikidata.org/entity/Q816264",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q3968",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q8087",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12479",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12482",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12483",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q42989",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q131476",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q149972",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q217413",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q5862903",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q131476",
      "target": "http://www.wikidata.org/entity/Q1192971",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q149972",
      "target": "http://www.wikidata.org/entity/Q149999",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q149972",
      "target": "http://www.wikidata.org/entity/Q150008",
      "type": "hasPart"
    }
  ],

============================= 编辑 2 ============= ==================

我设法得到了一些非常奇怪的东西

最佳答案

你的代码有很多问题

不使用链接和节点调用 update() 函数

不要将颜色分配给圆 x 和y 坐标

node.append("circle")
    .attr("r", 6)
    .attr("x", function (d) {return colors(d.position*20 + xCenter);})
    .attr("y", function (d) {return colors(yCenter);})
    .style("fill", function (d) {return colors(d.group);})

并且设置这些坐标对力模拟没有影响，即使它们是正确的坐标也是如此

您没有 dragEnd。在停止之前，拖动或单击后模拟会运行很长时间。 alpaTarget 位于 alphaMin 之上，因此它将“永不”停止。最终它会因为某种原因停止，也许它会检测到是否有任何重大的位置变化。我取消了 on-dargenden 行的注释并添加了将 alphaTarget 设置为 0 的函数。
```
function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    //d.fx = nodeFixX(d); // snap to its target position
    d.fx = null; // or let the force figure it out
    d.fy = null;
}
```

添加了缺失的样式

<style>
.link { stroke: steelblue;}
</style>

和 HTML

<div class="node-description"></div>
<svg width="800" height="600"></svg>

为什么要设置两次 forceCenter()？
因为我没有您使用的 HTML，所以我禁用了所有关于 graphPlaceholder

你的问题的解决方案是

移除forceCenter()力
将position=0节点锁定到中心位置
使用 forceX() 将节点拉到特定列
已经将节点定位在正确的 X 位置和 y 中心位置。最好从原点 (0,0)
您可以选择让力量处理 X 位置或将其强制到 X 位置。查找注释 //或让原力解决。我发现使用强制(如完整示例中所设置的那样)对节点重新排序会更容易一些

这里是主要的修改

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function (d) {return d.id;}).distance(columnXFactor)) // .strength(0.2)
    .force("charge", d3.forceManyBody().strength(-60))
    .force("columnX", d3.forceX(n => n.position*columnXFactor + xCenter))  //.strength(0.05)  // or let the force figure it out
    // .force("center", d3.forceCenter(xCenter, yCenter))
    ;

// force 1 node in the center
var pos0Node = data.graphNodes.filter(n => n.position === 0)[0];
pos0Node.fx = xCenter;
pos0Node.fy = yCenter;

function nodeFixX(n) {
    return n.position*columnXFactor + xCenter;
}
data.graphNodes.forEach(n => {
    //n.fx = nodeFixX(n); // snap to its target position
    n.x = nodeFixX(n); // or let the force figure it out
    n.y = yCenter;
});

update(data.graphLinks, data.graphNodes);

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force Mathematics</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style>
.link { stroke: steelblue;}
</style>
</head>
<body>
<div class="node-description"></div>
<svg width="800" height="600"></svg>
<script>
var data = 
{
  "graphNodes": [
    {
      "id": "http://www.wikidata.org/entity/Q395",
      "label": "mathematics",
      "description": "field of study (numbers, quantity, structure, relationships, space, change)",
      "group": 0,
      "position": 0
    },
    {
      "id": "http://www.wikidata.org/entity/Q41511",
      "label": "universal language",
      "description": "hypothetical language that is supposed to have been spoken by all or most of the world's population",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q4671286",
      "label": "academic major",
      "description": "academic discipline to which a student formally commits",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q11862829",
      "label": "academic discipline",
      "description": "concentration in one academic field of study or profession",
      "group": 6,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q475023",
      "label": "exact science",
      "description": "",
      "group": 9,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q816264",
      "label": "formal science",
      "description": "disciplines concerned with formal systems, such as logic, mathematics, and game theory",
      "group": 9,
      "position": -1
    },
    {
      "id": "Mathematics",
      "label": "Mathematics",
      "description": "",
      "group": 13,
      "position": -1
    },
    {
      "id": "http://www.wikidata.org/entity/Q30125896",
      "label": "scientific hypothesis",
      "description": "idea that proposes a tentative explanation about a phenomenon or a narrow set of phenomena observed in the natural world (primary features of a scientific hypothesis: falsifiability, testability)",
      "group": 6,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q2623733",
      "label": "fictional language",
      "description": "language in fictional stories",
      "group": 9,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q1047113",
      "label": "specialty",
      "description": "field limited to a specific area of knowledge",
      "group": 9,
      "position": -2
    },
    {
      "id": "Academic disciplines",
      "label": "Academic disciplines",
      "description": "",
      "group": 13,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q2465832",
      "label": "branch of science",
      "description": "field or discipline of science",
      "group": 6,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q336",
      "label": "science",
      "description": "study and knowledge",
      "group": 9,
      "position": -2
    },
    {
      "id": "http://www.wikidata.org/entity/Q3968",
      "label": "algebra",
      "description": "topic in mathematics and definition is Algebra uses letters (like x or y) or other symbols in place of values, and plays with them using special rules.",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q8087",
      "label": "geometry",
      "description": "branch of mathematics that measures the shape, size and position of objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12479",
      "label": "number theory",
      "description": "branch of pure mathematics devoted primarily to the study of the integers",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12482",
      "label": "set theory",
      "description": "branch of mathematics that studies sets, which are collections of objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q12483",
      "label": "statistics",
      "description": "study of the collection, organization, analysis, interpretation, and presentation of data",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q42989",
      "label": "topology",
      "description": "subfield of mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q131476",
      "label": "graph theory",
      "description": "study of graphs, which are mathematical structures used to model pairwise relations between objects",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q149972",
      "label": "calculus",
      "description": "branch of mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q217413",
      "label": "category theory",
      "description": "logic and mathematics",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q5862903",
      "label": "probability theory",
      "description": "branch of mathematics concerned with probability",
      "group": 1,
      "position": 1
    },
    {
      "id": "http://www.wikidata.org/entity/Q1192971",
      "label": "network theory",
      "description": "study of graphs as a representation of either symmetric relations or, more generally, of asymmetric relations between discrete objects",
      "group": 1,
      "position": 2
    },
    {
      "id": "http://www.wikidata.org/entity/Q149999",
      "label": "differential calculus",
      "description": "subfield of calculus",
      "group": 1,
      "position": 2
    },
    {
      "id": "http://www.wikidata.org/entity/Q150008",
      "label": "integral calculus",
      "description": "subfield of calculus",
      "group": 1,
      "position": 2
    }
  ],
  "graphLinks": [
    {
      "source": "http://www.wikidata.org/entity/Q41511",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q4671286",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q11862829",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q475023",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q816264",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "subclassOf"
    },
    {
      "source": "Mathematics",
      "target": "http://www.wikidata.org/entity/Q395",
      "type": "CommonCategory"
    },
    {
      "source": "http://www.wikidata.org/entity/Q30125896",
      "target": "http://www.wikidata.org/entity/Q41511",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2623733",
      "target": "http://www.wikidata.org/entity/Q41511",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q11862829",
      "target": "http://www.wikidata.org/entity/Q4671286",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q1047113",
      "target": "http://www.wikidata.org/entity/Q11862829",
      "type": "subclassOf"
    },
    {
      "source": "Academic disciplines",
      "target": "http://www.wikidata.org/entity/Q11862829",
      "type": "CommonCategory"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2465832",
      "target": "http://www.wikidata.org/entity/Q475023",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q336",
      "target": "http://www.wikidata.org/entity/Q475023",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q2465832",
      "target": "http://www.wikidata.org/entity/Q816264",
      "type": "instanceOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q475023",
      "target": "http://www.wikidata.org/entity/Q816264",
      "type": "subclassOf"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q3968",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q8087",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12479",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12482",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q12483",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q42989",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q131476",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q149972",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q217413",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q395",
      "target": "http://www.wikidata.org/entity/Q5862903",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q131476",
      "target": "http://www.wikidata.org/entity/Q1192971",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q149972",
      "target": "http://www.wikidata.org/entity/Q149999",
      "type": "hasPart"
    },
    {
      "source": "http://www.wikidata.org/entity/Q149972",
      "target": "http://www.wikidata.org/entity/Q150008",
      "type": "hasPart"
    }
  ]
};

var nodeDescription = document.querySelector(".node-description")
var colors = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    node,
    link;
var xCenter = width*0.5;
var yCenter = height*0.5;
var columnXFactor = 100;

svg.append('defs').append('marker')
    .attrs({'id':'arrowhead',
        'viewBox':'-0 -5 10 10',
        'refX':13,
        'refY':0,
        'orient':'auto',
        'markerWidth':13,
        'markerHeight':8,
        'xoverflow':'visible'})
    .append('svg:path')
    .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
    .attr('fill', '#999')
    .style('stroke','none');

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function (d) {return d.id;}).distance(columnXFactor)) // .strength(0.2)
    .force("charge", d3.forceManyBody().strength(-60))
    .force("columnX", d3.forceX(n => n.position*columnXFactor + xCenter))  //.strength(0.05)  // or let the force figure it out
    // .force("center", d3.forceCenter(xCenter, yCenter))
    ;

// force 1 node in the center
var pos0Node = data.graphNodes.filter(n => n.position === 0)[0];
pos0Node.fx = xCenter;
pos0Node.fy = yCenter;

function nodeFixX(n) {
    return n.position*columnXFactor + xCenter;
}
data.graphNodes.forEach(n => {
    //n.fx = nodeFixX(n); // snap to its target position
    n.x = nodeFixX(n); // or let the force figure it out
    n.y = yCenter;
});

update(data.graphLinks, data.graphNodes);

function update(links, nodes) {
    // var graphPlaceholder = document.querySelector(".graph-placeholder")
    // width = graphPlaceholder.offsetWidth
    // height = graphPlaceholder.offsetHeight

    // svg
    //     .attr("width", width)
    //     .attr("height", height)

    // simulation.force("center", d3.forceCenter(xCenter, yCenter));

    link = svg.selectAll(".link")
        .data(links)
        .enter()
        .append("line")
        .attr("class", "link")
        .attr('marker-end','url(#arrowhead)')

    link.append("title")
        .text(function (d) {return d.type;});

    edgepaths = svg.selectAll(".edgepath")
        .data(links)
        .enter()
        .append('path')
        .attrs({
            'class': 'edgepath',
            'fill-opacity': 0,
            'stroke-opacity': 0,
            'id': function (d, i) {return 'edgepath' + i}
        })
        .style("pointer-events", "none");

    edgelabels = svg.selectAll(".edgelabel")
        .data(links)
        .enter()
        .append('text')
        .style("pointer-events", "none")
        .attrs({
            'class': 'edgelabel',
            'id': function (d, i) {return 'edgelabel' + i},
            'font-size': 10,
            'fill': '#aaa'
        });

    edgelabels.append('textPath')
        .attr('xlink:href', function (d, i) {return '#edgepath' + i})
        .style("text-anchor", "middle")
        .style("pointer-events", "none")
        .attr("startOffset", "50%")
        .text(function (d) {return d.type});

    node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)
        ).on("click", function(d){
            nodeDescription.innerHTML =  d.label + ": " + d.description;
        });

    node.append("circle")
        .attr("r", 6)
        //.attr("x", 0) // d => colors(d.position*20 + xCenter)
        //.attr("y", 0) // d => colors(yCenter)
        .style("fill", function (d) {return colors(d.group);})

    node.append("title")
        .text(function (d) {return d.id;});

    node.append("text")
        .attr("dy", -9)
        .text(function (d) {return d.label;});
        //.text(function (d) {return '' + d.position + d.label;});

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

    simulation.force("link")
        .links(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("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});

    edgepaths.attr('d', function (d) {
        return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
    });

    edgelabels.attr('transform', function (d) {
        if (d.target.x < d.source.x) {
            var bbox = this.getBBox();
            rx = bbox.x + bbox.width / 2;
            ry = bbox.y + bbox.height / 2;
            return 'rotate(180 ' + rx + ' ' + ry + ')';
        }
        return 'rotate(0)';
    });
}

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 = nodeFixX(d); // snap to its target position
    d.fx = null; // or let the force figure it out
    d.fy = null;
}

</script>
</body>
</html>

关于javascript - 如何保持 d3.forceSimulation() 节点均匀分布而不重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51603044/

文章推荐： javascript - push.on ('registration' ) 不适用于 android

文章推荐： Android View大纲——使用自定义Path

文章推荐： java - Android:Realm了解LinkingObjects

Android，保持 View
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息，服务器发回一些代表某些 View 的数据，然后 GUI 显示它。现在我已经将网络部分实现为一项服务
go - 在golang中的表达式中检查括号是否平衡[保持]
给定表达式字符串exp，编写程序检查exp中“{”、“}”、“（”、“）”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
python - 保持 Python 脚本运行的简单方法？
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
tomcat - 保持 Tomcat 更新的策略？
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台)，其中包含不同的应用程序。为了保持理智，我当然会使用 Ansible 等工具，更重要的是，公共(p
Winforms:保持 Winforms 应用解锁的最佳方式？
我有一个 winforms 应用程序，它在网络服务请求期间被锁定我已经尝试使用 doEvents 来保持应用程序解锁，但它仍然不够响应，我怎样才能绕过这个锁定，让应用程序始终响应？最佳答案最好
vba - 保持/插入前导 0
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
c# - 保持 Canvas 元素相对于背景图像定位
我正在尝试在我的 Canvas 中定位元素相对于我的背景。窗口被重新调整大小，保持纵横比。背景随着窗口大小而拉伸(stretch)。问题是一旦重新调整窗口大小，元素位置就会不正确。如果窗口的大小
java - 保持 OneToMany 关系只保持集合中的第一个对象？
一直在玩弄 Hibernate 和 PostgreSQL，试图让它按预期工作。但是由于某种原因，当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时，除了第一个项目之外，所有项
github - 保持 fork 最新
我想将某些东西提交到 github 存储库，但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支，提交了我的更改并提交了一个 pull-request。现在，问题是过了一段时间其他人已经
julia - 保持/循环具有相同抽象父类型的对象集合的最佳实践 (Julia)
这是一个初学者问题，我仍在考虑“在 OOP 中”，所以如果我错过了手册中的答案或者答案很明显，我深表歉意。假设我们有一个抽象类型， abstract type My_Abstract_type en
javascript - 保持 jQuery 最新的实用方法？
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基，介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本，升级现在迫
iphone - 保持 FMDB 线程安全
我看到在FMDB 2.0中，作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
cocoa - 保持 NSScrollView 固定
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的，而 NSArrayContro
WPF 保持 TreeView 列表排序
我在 TreeView 上有一个节点，我手动填充该节点并希望保持排序。通过用户交互，TreeViewItem 上的标题可能会更改，它们应该移动到列表中的适当位置。我遍历一个 foreach，创建多个
macos - 保持 NSWindow 最前面
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
delphi - 按钮(保持 "up"或 "down")
我需要放置一个 form 3 按钮，当我单击该按钮时，将其显示为按下，其他按钮向上，当我单击另一个按钮时，它应该为“向下”，其他按钮应为“向上” 最佳答案所有按钮的属性“Groupindex”必须设
perl - 保持 perl 脚本运行
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生，所以我正在使用它附带的演示代码，其中包括将 STDIN
.net - 保持 TreeView 的滚动位置
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置？例如，我有一个树形 View 控件，并经历了一个向其添加各种节点的过程，并将它们固定在底部。在此过程中，我可以滚动浏览 TreeVi
vbscript - 保持 VBScript 的组织性
我维护了大量的 vbscripts，用于在我的网络上执行各种启动脚本，并且有一些我在几乎所有脚本中使用的函数。除了复制和粘贴之外，有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
azure - 保持 Azure 自托管代理运行和连接
我有一些关于 Azure 自托管的问题。假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时，代理将脱机。现在，当 Bob 登录同一台计算

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何保持 d3.forceSimulation() 节点均匀分布而不重叠