我是 D3 版本 4 的新用户，我在将固定节点功能添加到力导向布局时遇到问题。我相信这是通过将 d.fixed 设置为 true 在 v3 中实现的，但是我在将其转换为与 v4 兼容的内容时遇到了问题。我试过添加 simulation.fix，但如果不从模拟开始就修复节点，就无法将它集成到我现有的代码中。

理想情况下，我想添加一个双击监听器，将节点固定到位，并允许通过拖动功能对其进行定位，然后在再次双击时恢复模拟力。预先感谢您的帮助。

这是我的js:

<!--load svg-->
<svg width="1500" height="600"></svg>
 <!--begin javascript for d3 forced layout-->
<script>
var svgNetwork = d3.select("svg"),
    width = +svgNetwork.attr("width"),
    height = +svgNetwork.attr("height");


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



//load  the node csv data and link csv data together - open node(open link(funtions for making chart))
d3.csv("nodes.csv", function (error1, data1) {
    if (error1) throw error1;
    console.log(data1);

    d3.csv("lines.csv", function (error2, data2) {
        if (error2) throw error2;
        console.log(data2);

        data1.forEach(function (data1){
            data1.group = +data1.group;
        });

        var lower = d3.min(data1, function(data1) {return data1.group;});
        var upper = d3.max(data1, function(data1) {return data1.group;});
        var color = d3.scaleLinear()
            .domain([lower, 0, upper])
            .range(["#2E64FE", "#E6E6E6", "red"]);


        var link = svgNetwork.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(data2)
            .enter()
                .append("line")
                .attr("stroke-width", function(data2) { return Math.sqrt(data2.value); })
            .attr("fill", "#777")
            .attr("stroke-opacity", "0.6");

    var node = svgNetwork.selectAll(".node")
         .data(data1)
             .enter()
                 .append("g");

        var circle = node.append("circle")
            .attr("id", function(data1) {return data1.id;})
            .attr("r", function(data1) {return data1.rad;})
            .attr("fill", function(data1) { return color(data1.group); })
            .style("stroke", function(data1) { return color(data1.group); })
            .style("stroke-width", "10px")
            .style("stroke-opacity", "0.9");    

        var label = node.append("svg:text")
            .text(function (data1) { return data1.id; })
            .style("text-anchor", "middle")
            .style("fill", "#000000")
            .style("font-family", "Arial")
            .style("font-size", "0.8em")
            .style("font-weight", "bold");

   node.call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));


  simulation
      .nodes(data1)
      .on("tick", ticked);
  simulation.force("link")
      .links(data2);

  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 + ")"; });

        }

    });
});

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

这是我的 node.csv 文件和 lines.csv 文件的示例:

节点.csv

id  group   rad
a   0.168316947 0.288907878
b   -0.38499088 1.012210504
c   -0.548386797    1.301376974
d   -0.215565786    2.456429671
e   -0.756094177    6.409396582
f   -0.538867892    1.804950731
g   -0.325232806    0.518895927
h   0.686157994 1.011850971
i   -0.723155438    5.853700074
j   2.008089674 2.73207752
k   -0.358621917    2.040722107
l   -0.393305984    3.221637083
m   -0.676289998    1.598250699
n   -0.950808451    26.26021586
o   0.134589658 0.270633823
p   -0.521333199    6.216421369
q   1.628300116 2.293471337
r   0.62673 2
s   -0.843711093    40.86067523

线条.csv

source  target  value
b   a   20
c   a   20
d   a   20
e   a   20
f   a   20
g   a   20
h   a   20
i   a   20
j   a   20
k   a   20
l   a   20
m   a   20
n   a   20
o   a   20
p   a   20
q   a   20
r   a   20
s   a   20

最佳答案

不确定是否需要答案，但我能够使节点具有粘性，实际上它是您代码中的一个非常简单的修复，我在 GitHub 上查看此问题时了解到它 - Issue #35

现在在 d3 库的 v4 中修复节点的想法非常简单，在您上面的代码中只需注释以下两行:

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

理论是，要修复节点，我们需要设置 node.fx 和 node.fy，您的代码实际上是在 dragged()<> 函数定义。

希望对我有所帮助，就像对我一样。

此处的文档中也提到了同样的内容 - D3 V4 - API

To fix a node in a given position, you may specify two additional properties:

• fx - the node’s fixed x-position
• fy - the node’s fixed y-position

关于javascript - D3.js 版本 4 使节点具有粘性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39168274/