D3.js: перенос значения одного атрибута в другой атрибут для конкретного узла FDG?


Я использую силовой ориентированный граф, который добавляет круги к каждому узлу.

В рамках создания узла я сначала установил радиус" 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 (или наоборот), позволяя каждому узлу расширяться или сжиматься на основе контроллеров.

В отдельной функции контроллера я позже выбираю все узлы, к которым хочу применить новый размер rSize. Выбрать их несложно...

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

Однако я не знаю, каков синтаксис для чтения rSize каждого узла и применения rSize к этому конкретному узлу это меняется. Я бы подумал, что это что-то вроде...

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

Другими словами, Я хотел бы получить значение атрибута "rSize" этого конкретного узла и установить атрибут "r" в значение, полученное из "rSize".

Есть ли идеи о том, какой правильный синтаксис должен это сделать?

Спасибо за любую помощь, которую вы можете предложить!

1 2

1 ответ:

Вы ищете функцию getAttribute().

Так что что-то вроде этого должно сработать для вас:

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

Помните, что this в функции-это сам круг и, следовательно, просто элемент в DOM, насколько я понимаю.

Вы можете подтвердить это, просто распечатав это с помощью console.log(this) прямо перед операцией result.

Надеюсь, это поможет.