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 ответ:
Вы ищете функцию
getAttribute()
.Так что что-то вроде этого должно сработать для вас:
selectedNodeCircles.attr("r", function() {return this.getAttribute("rSize")})
Помните, что
this
в функции-это сам круг и, следовательно, просто элемент в DOM, насколько я понимаю.Вы можете подтвердить это, просто распечатав это с помощью
console.log(this)
прямо перед операциейresult
.Надеюсь, это поможет.