D3.js: Transferring the value of one attribute to another attribute, for a specific FDG node?

问题

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

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);

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.

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");

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"); });

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!

回答1:

You are looking for the getAttribute() function.

So something like this should work for you:

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

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

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

Hope this helps.

来源：https://stackoverflow.com/questions/17577275/d3-js-transferring-the-value-of-one-attribute-to-another-attribute-for-a-speci

标签

d3.js

force-layout