D3.js:对于特定的 FDG 节点，将一个属性的值传输到另一个属性？

Question

我使用的是力向图，它将圆圈附加到每个节点。

作为节点创建的一部分，我首先将每个节点圆的半径“r”设置为默认且一致的值(defaultNodeSize = 10)。这成功地绘制了一个集群，其中所有相关节点的大小都相同。

    // Append circles to Nodes
    node.append("circle")
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; })
        .attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } ) // <---------------------------- Radius "r" set HERE!!!!
        .style("fill", "White") // Make the nodes hollow looking
        .attr("type_value", function(d, i) { return d.type; })
        .attr("color_value", function(d, i) { return color_hash[d.type]; })
        .attr("rSize", function(d, i) { return d.rSize; }) // <------------------ rSize HERE!!!!
        .attr("id", "NODE" )
        .attr("class", function(d, i) {
          var str = d.type;
          var strippedString = str.replace(/ /g, "_")
          //return "nodeCircle-" + strippedString; })
          if (d.id==focalNodeID) { return "focalNodeCircle"; }
          else { return "nodeCircle-" + strippedString; }
        })
        .style("stroke-width", 5) // Give the node strokes some thickness
        .style("stroke", function(d, i) { return color_hash[d.type]; } ) // Node stroke colors
        .call(force.drag);

此外，在创建时，我设置了一个名为“rSize”的属性，它指定该节点的绝对大小。每个节点都有不同的 rSize，并且 rSize 与 defaultNodeSize 不同。 rSize 的目的是让我稍后可以访问它，并动态地将圆的半径从 defaultNodeSize 更改为 rSize(或相反)，从而允许每个节点根据 Controller 扩展或收缩。

在单独的 Controller 函数中，我稍后选择要应用新 rSize 的所有节点。选择它们很容易...

var selectedNodeCircles = d3.selectAll("#NODE");

但是，我不知道读取每个节点的 rSize 并将 rSize 应用于正在更改的特定节点的语法是什么。我认为这就像......

selectedNodeCircles.("r", function(){ return this.attr("rSize"); });

换句话说，我想检索该特定节点的“rSize”属性值并将属性“r”设置为从“rSize”检索到的值。

知道执行此操作的正确语法是什么吗？

感谢您提供的任何帮助!

Answer 1

您正在寻找 getAttribute() 函数。

所以像这样的东西应该适合你:

selectedNodeCircles.attr("r", function() {return this.getAttribute("rSize")})

请记住，据我所知，函数中的 this 是圆本身，因此只是 DOM 中的一个元素。

您可以通过在 result 语句之前使用 console.log(this) 打印出来来确认这一点。

希望这有帮助。