Установить атрибут круга из атрибута другого круга, используя d3.select?

Question

Я хочу разместить круги SVG вокруг некоторых кругов SVG. Я нахожу нужные круги, используя d3.selectAll().filter(). Это почти работает - создается круг. Но я не могу понять, как установить центр нового круга из центра старого круга, поэтому новый круг создается на 0,0. Ничего, что я пробовал, сработало.

// first I find the circles I want 
foundNodeCircles = d3.selectAll(".node").filter(function(d,i){return d.label == nodeRE;}); 

// Then I create a new, larger circle for each circle that I found: 
svg.selectAll(".nodeHighlightRing") 
.data(foundNodeCircles) // make one ring per node circle 
.enter().append("circle") // make the ring 
.attr("class", "nodeHighlightRing") // specify its qualities 
.attr("cx", function(d) { return d.cx;}) // BROKEN: set center to center of old circle 
.attr("cy", function(d) { return d.cy;}) // BROKEN: set center to center of old circle 
.attr("r", 10) 
.style("opacity", 0) 
.style("stroke", "green") 
.style("stroke-width", "1.5") 
.style("stroke-opacity", "1"); 

В в дополнение к d.cx, я попытался this.cx, d.attr["cx"], this.attr["cx"], d3.select(this).attr("cx"), d3.select(d).attr("cx"), и несколько других вещей, которые, казалось, менее вероятно, будет работать. Никто не добился успеха.

Я думал, что вопрос this или this one поможет, но я, очевидно, делаю что-то другое.

Answer 1

Проблема заключается в том, что ваша переменная foundNodeCircles проводит выбор d3, а метод соединения данных .data() ожидает массив, представляющий ваши данные.

Если вы используете foundNodeCircles[0] для объединения данных, вы будете ссылаться на массив элементов, которые содержались в выборе, а не на сам выбор. Затем, когда вы устанавливаете свои атрибуты, d будет ссылаться на сам элемент DOM, поэтому вы можете использовать выбор d3 для выбора d и вызвать .attr для извлечения атрибута или просто использовать метод DOM .getAttribute.

svg.selectAll(".nodeHighlightRing") 
    // BIND TO THE ELEMENTS RATHER THAN THE SELECTION 
    .data(foundNodeCircles[0]) 
    .enter().append("circle") 
    .attr("class", "nodeHighlightRing") 
    // EITHER OF THESE METHODS SHOULD WORK 
    .attr("cx", function(d) { return d3.select(d).attr("cx"); }) 
    .attr("cy", function(d) { return d.getAttribute("cy"); }) 
    // ... etc. ...