D3.js 如何在力定向图中创建多个属性的缓慢同时转换？

在上一篇名为“”的文章中，我得到了一个关于如何在D3中转换单个元素（例如“仅圆”的半径）的极好答案

我接下来的问题是如何同时转换“多个D3属性”

作为提醒，我使用D3生成的单选按钮将FDG布局中节点的大小（鼠标单击）从默认大小切换为缩放大小。您可以在（）的左上角找到单选按钮

在默认数字和缩放幅度（现在使用过渡）之间切换节点圆的代码如下所示

    var densityControlClick = function() {

      var thisObject = d3.select(this);
      var typeValue = thisObject.attr("density_type");
      var oppositeTypeValue = (function() {
        if(typeValue=="On") {
          return "Off";
        } else {
          return "On";
        }
      })();

      var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
      var selectedBullet = d3.selectAll(densityBulletSelector);
      selectedBullet.style("fill", "Black") 

      var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
      var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
      selectedOppositeBullet.style("fill", "White") 

      if(typeValue=="On") {
        var selectedNodeCircles = d3.selectAll("#NODE");
        selectedNodeCircles.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
      }
      else {
        var selectedNodeCircles = d3.selectAll("#NODE");            selectedNodeCircles.transition().duration(500).attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
      }

    }

一切都很好，当您选择单选按钮时，您可以看到较慢的节点转换。然而，我现在想学习如何同时转换多个元素，例如半径和边长度，以及这样做背后的理论，以展示D3的动态特性

---

我的问题是：考虑到我已经可以成功地转换圆的半径，我如何转换其他元素，比如基于属性的边长度，比如“alpha”、“摩擦力”，等等，以及。。。转换多个元素背后的理论是什么（换句话说，代码在英语中是什么意思）？D3API似乎没有清楚地理解同时转换多个属性背后的理论。

因此，转换多个属性是这个问题的简单部分。与常规选择一样，您可以在转换时一次设置多个属性：

selectedNodeCircles.transition().duration(500)
    .attr("r", function(d){ return rRange(d.rSize); })
    .attr("stroke", 'red');

这将转换半径和线条颜色。转换是DOM元素（在本例中是圆）的一个属性，它将转换任意多个DOM属性。要记住的是，每个DOM元素上只有一个transition对象。因此，如果您创建另一个，您将覆盖旧的

// This will NOT work
circles.transition().duration(1000).attr('r', 50);
// The radius transition will be overridden by the fill 
// transition and so will not complete
circles.transition().duration(1000).attr('fill', 'red');

这实际上是非常有用的，因为您不必担心打断正在进行的动画，并计算出它们的进度，然后开始一个新的动画-这通常会自动处理

在本例中，您希望在图形中转换边长度。这些由节点的位置属性确定。从您的成品判断，这些属性已经被设置为动画，因为您在布局算法的每次迭代中（不是通过转换）都在更新DOM，可能是在tick（）回调中

因此，您可以在tick回调中使用过渡，这可能看起来很奇怪，并且与radius过渡保持同步可能很麻烦（您必须在过渡中设置这两个属性）。但这可能正是你需要的

---

或者，如果可以等待，请不要在tick回调中更新DOM。让布局完成-当它不在每个刻度上渲染时，它会运行得更快-完成后，您可以将半径、x和y属性设置为其最终位置的动画。当然，这意味着您需要良好的起始位置。

我已经编辑了您的标题。请参阅“”，其中的共识是“不，他们不应该”。