我正在尝试在D3v4中转换力模拟的节点.原始力是由鲨鱼家族聚集的节点正确绘制的,我想单击“格陵兰鲨鱼”按钮,这样只有名称为“格陵兰鲨鱼”的节点才可见(这是可行的),我将像这样,如果用户单击“按家庭鲨鱼”按钮,则力将返回到其原始位置.但是,如果在单击“格陵兰鲨鱼”后单击“按家庭分类的鲨鱼”,则只有两个节点可见,因为除了直接从格陵兰鲨鱼节点更新的节点之外,其余节点都没有cx和cy,因此它们全部堆叠在默认位置0,0上.我不确定为什么cx和cy属性会丢失,这可能是我的输入,更新,退出模式中的错误吗？

以下是相关代码,这是指向可视化代码的Plunker链接
https://plnkr.co/edit/rvbOJT2fIgxBlsqOtXR4
和可视化
https://run.plnkr.co/plunks/rvbOJT2fIgxBlsqOtXR4/

      // Original force simulation by family

      var simulation = d3.forceSimulation();

      simulation.force('x',d3.forceX(function(d) {
              var i = mapIndex(d.family);
              return xposition(i)
          }).strength(0.03))
          .force('y',d3.forceY(function(d) {
              var i = mapIndex(d.family);
              return yposition(i)
          }).strength((0.03)))
          .force('collide',d3.forceCollide(function(d) {
              return radiusScale(+d.size)
          })).velocityDecay(0.1).alphaDecay(0.001);


      var circles = g.selectAll(".sharks")
          .data(nodes)
          .enter().append("circle")
          .attr("class","sharks")
          .attr("r",function(d) {
              return radiusScale(+d.size)
          })
          .attr("fill",function(d) {
              return colorScale(d.family)
          })
          .attr('stroke','')


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


      nodes.forEach(function(d) {
          d.x = familyXScale(d.family)
          d.y = yPositionScale(sharks.indexOf(d.name))
      })


      function ticked() {
          circles
              .attr("cx",function(d) {
                  return d.x
              })
              .attr("cy",function(d) {
                  return d.y
              })
      }

      function charge(d) {
          return -Math.pow(d.radius,2.0) * forceStrength;
      }



       // function for only showing one node (greenland shark)
      function greenlandShark() {
          console.log('greenlandShark');
          console.log(nodes);

          var newNodes = filterNodes('common_name','Greenland shark');

          circles = g.selectAll(".sharks").data(newNodes);

          circles.exit()
              .transition()
              .duration(1000)
              .attr("r",0)
              .remove();

          circles
              .attr('r',function(d) {
                  return radiusScale(+d.size)
              })
              .attr('fill',function(d) {
                  return colorScale(d.family)
              });

          simulation.nodes(newNodes)
              .on('tick',ticked);

          simulation.force('x',d3.forceX().strength(0.03).x(center.x))
              .force('y',d3.forceY(function(d) {
                  return height / 2
              }).strength((0.03)));

          simulation.alpha(1).restart();

      }

      function filterNodes(key,group) {
          var newnodes = nodes.filter(function(d) {
              return d[key] == group;
          });
          return newnodes;;
      }

      // function for visualizing all nodes again organized by family     
      function sharksByFamily() {

          circles = g.selectAll(".sharks").data(nodes);

          circles.exit().transition().duration(750)
              .attr("r",0)
              .remove();

          circles.transition().duration(750)
              .attr("fill",function(d) {
                  return colorScale(d.family)
              }).attr("r",function(d) {
                  return radiusScale(+d.size);
              })

          circles.enter().append("circle").attr("class","sharks")
              .attr("fill",function(d) {
                  return radiusScale(+d.size);
              })
              .attr('stroke','')

          simulation.force('x',d3.forceX(function(d) {
                  var i = mapIndex(d.family);
                  return xposition(i)
              }).strength(0.03))
              .force('y',d3.forceY(function(d) {
                  var i = mapIndex(d.family);
                  return yposition(i)
              }).strength((0.03)))
              .force('collide',d3.forceCollide(function(d) {
                  return radiusScale(+d.size)
              })).velocityDecay(0.1).alphaDecay(0.001);


          // cx cy not showing up for nodes
          simulation.nodes(nodes)
              .on('tick',ticked);

          simulation.alpha(1).restart();

      }