Question

单击蓝色中的任意位置以添加节点。它被添加了。拖动执行工作 - 我可以在dragstarted，dragged和dragended中控制console.log并看到它被拖动。即使是其他节点也能正确地移出幻像节点！但在视觉上它只是坐在那里。

我必须遗漏一些基本的东西。我做错了什么？

这是代码和fiddle

<body>
<script src="d3.min.js"></script>
<script>
  var width = 640,
      height = 480;

  var graphNodes = [
    { id: 0, r: 5 },
    { id: 1, r: 5 },
    { id: 2, r: 5 },
    { id: 3, r: 5 },
    { id: 4, r: 5 },
    { id: 5, r: 5 },
    { id: 6, r: 5 },
    { id: 7, r: 5 },
    { id: 8, r: 5 }
  ];

  var graphEdges = [
      { source: 0, target: 1 },
      { source: 0, target: 2 },
      { source: 0, target: 3 },
      { source: 0, target: 4 },
      { source: 0, target: 5 },
      { source: 0, target: 6 },
      { source: 0, target: 7 },
      { source: 0, target: 8 }
  ];

  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

  svg.append('rect')
      .attr('class', 'graph')
      .attr('width', width)
      .attr('height', height)
      .attr('fill', 'lightblue')
      .attr('opacity', 0.3)
      .on('click', function(){
        graphNodes.push({ id: graphNodes.length, r: 15 });
        update(d3.mouse(this));
      });

  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d, i) { return i; }))
      .force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(16) )
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2))
      .force("y", d3.forceY(0))
      .force("x", d3.forceX(0));

  var linkGroup = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graphEdges)
      .enter().append("line")
      .attr('stroke', 'gray')
      .attr("stroke-width", 2);

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

  function dragstarted(d){
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    simulation.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;
    simulation.alphaTarget(0.1);
  }

  function ticked(){
    linkGroup
        .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; });

    //nodeGroup.attr("cx", function(d){ return d.x;}).attr("cy", function(d){ return d.y;})
    nodeGroup.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
  }

  function update(coordinates) {
    // Redefine and restart simulation
    simulation.nodes(graphNodes).on("tick", ticked);
    simulation.force("link").links(graphEdges);

    // Update links
    var link = linkGroup.selectAll("line").data(graphEdges),
        linkEnter = link.enter().append("line");

    link = linkEnter.merge(link);
    link.exit().remove();

    // Update nodes
    var node = nodeGroup.data(graphNodes),
        nodeEnter = node.enter().append("circle")
            .attr("r", function(d){ return d.r; })
            .attr("fill", "gray")
            .attr('cx', coordinates[0])
            .attr('cy', coordinates[1])
            .call(d3.drag()
                .on("start",dragstarted)
                .on("drag",dragged)
                .on("end",dragended));

    node = nodeEnter.merge(node);
    node.exit().remove();
  }

  simulation.nodes(graphNodes).on("tick", ticked);
  simulation.force("link").links(graphEdges);

</script>
</body>

Answer 1

您依靠ticked事件来移动节点。您的ticked事件会对nodeGroup变量进行操作。您的点击处理程序和update功能虽然可以创建一个本地node变量并对其进行操作（即您输入的新节点永远不会成为nodeGroup的）。

update中的简单更改就是：

node = nodeEnter.merge(node);

成为这个：

nodeGroup = nodeEnter.merge(node);

修复后，您还会发现无需明确设置进入节点的位置（即您不再需要这些线）：

.attr('cx', coordinates[0])
.attr('cy', coordinates[1])

运行代码：

<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
  var width = 640,
      height = 480;

  var graphNodes = [
    { id: 0, r: 5 },
    { id: 1, r: 5 },
    { id: 2, r: 5 },
    { id: 3, r: 5 },
    { id: 4, r: 5 },
    { id: 5, r: 5 },
    { id: 6, r: 5 },
    { id: 7, r: 5 },
    { id: 8, r: 5 }
  ];

  var graphEdges = [
      { source: 0, target: 1 },
      { source: 0, target: 2 },
      { source: 0, target: 3 },
      { source: 0, target: 4 },
      { source: 0, target: 5 },
      { source: 0, target: 6 },
      { source: 0, target: 7 },
      { source: 0, target: 8 }
  ];

  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

  svg.append('rect')
      .attr('class', 'graph')
      .attr('width', width)
      .attr('height', height)
      .attr('fill', 'lightblue')
      .attr('opacity', 0.3)
      .on('click', function(){
        graphNodes.push({ id: graphNodes.length, r: 15 });
        update(d3.mouse(this));
      });

  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d, i) { return i; }))
      .force("collide",d3.forceCollide( function(d){return d.r + 8 }).iterations(16) )
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2))
      .force("y", d3.forceY(0))
      .force("x", d3.forceX(0));

  var linkGroup = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(graphEdges)
      .enter().append("line")
      .attr('stroke', 'gray')
      .attr("stroke-width", 2);

  var nodeGroup = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graphNodes)
      .enter().append("circle")
      .attr("r", function(d){ return d.r; })
      .attr("fill", "gray")
      .call(d3.drag()
          .on("start",dragstarted)
          .on("drag",dragged)
          .on("end",dragended));

  function dragstarted(d){
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    simulation.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;
    simulation.alphaTarget(0.1);
  }

  function ticked(){
    linkGroup
        .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; });

    //nodeGroup.attr("cx", function(d){ return d.x;}).attr("cy", function(d){ return d.y;})
    nodeGroup.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
  }

  function update(coordinates) {
    // Redefine and restart simulation
    simulation.nodes(graphNodes).on("tick", ticked);
    simulation.force("link").links(graphEdges);

    // Update links
    var link = linkGroup.selectAll("line").data(graphEdges),
        linkEnter = link.enter().append("line");

    link = linkEnter.merge(link);
    link.exit().remove();

    // Update nodes
    var node = nodeGroup.data(graphNodes),
        nodeEnter = node.enter().append("circle")
            .attr("r", function(d){ return d.r; })
            .attr("fill", "gray")
      //      .attr('cx', coordinates[0])
      //      .attr('cy', coordinates[1])
            .call(d3.drag()
                .on("start",dragstarted)
                .on("drag",dragged)
                .on("end",dragended));

    nodeGroup = nodeEnter.merge(node);
    node.exit().remove();
  }

  simulation.nodes(graphNodes).on("tick", ticked);
  simulation.force("link").links(graphEdges);

    </script>
  </body>

</html>

D3：添加节点后，附加拖动但不起作用

1 个答案: