D3.js:对于特定的FDG节点，是否将一个属性的值转移到另一个属性?

问题描述

我正在使用一个力向图，该图将圆附加到每个节点上.

I'm using a force directed graph that appends circles to each node.

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

As part of the node creation, I first set the radius "r" of each node circle to a default and consistent value (defaultNodeSize = 10). This successfully draws a cluster where all related nodes are the same size.

    // 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(或相反)，从而允许每个节点根据控制器进行扩展或收缩.

Also, upon creation, I set an attribute called "rSize", which specifies that node's absolute magnitude. Each node has a different rSize and rSize is different than the defaultNodeSize. The purpose of rSize is so that I can access it, later, and dynamically change the circle's radius from it's defaultNodeSize to it's rSize (or the reverse) allowing each node to expand or contract, based on controllers.

在一个单独的控制器功能中，我稍后选择要对其应用新rSize的所有节点.选择它们很容易...

In a separate controller function, I later select all nodes I want to apply the new rSize to. Selecting them is easy...

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

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

However, I don't know what the syntax is to read each node's rSize and apply rSize to that specific node that's being changed. I would think that it's something like...

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

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

In other word's, I'd like to retrieve that specific node's "rSize" attribute value and set the attribute "r" to the value retrieved from "rSize".

是否知道执行此操作的正确语法是什么?

Any idea of what the correct syntax is to do this?

感谢您提供的任何帮助！

Thanks for any help you can offer!

推荐答案

您正在寻找getAttribute()函数.

所以这样的事情应该对您有用:

So something like this should work for you:

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

根据我的理解，请记住函数中的this是圆圈本身，因此仅是DOM中的一个元素.

Remember that this in the function, is the circle itself and hence simply an element in the DOM, to the best of my understanding.

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

You can confirm this by simply printing out this using console.log(this) right before the result statement.

希望这会有所帮助.

这篇关于D3.js:对于特定的FDG节点，是否将一个属性的值转移到另一个属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！