Доступ к атрибутам элемента d3.js из базы данных?

Я пытаюсь получить доступ к атрибутам cx и cy некоторых определенных кругов SVG, которые я уже нарисовал на экране с помощью функции d3.js.data(), может ли кто-нибудь помочь? Код, который пытается получить к нему доступ, находится ниже.

d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d.attr("cx") );    // just trying to demo my point, doesn't work
  }
}

Я новичок в d3.js и javascript, поэтому я не уверен, что я все равно подхожу к этому, чтобы вернуться вперёд, или, возможно, я пропустил встроенное решение?

Ответы

Ответ 1

Ваш код пытается получить атрибут svg из элемента данных, когда то, что вы действительно хотите, это получить этот атрибут из элемента svg DOM, как в:

console.log(d3.selectAll(".mynode").attr("cx"));

Это даст вам только атрибут для первого ненулевого элемента вашего выбора; Вы также можете filter ваш выбор, чтобы получить элемент DOM, который вы ищете:

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx"));

Или, если вы хотите получить доступ к атрибутам всех выбранных элементов, используйте this в каждой вашей функции:

d3.selectAll(".mynode").each( function(d, i){
  if(d.someId == targetId){
    console.log( d3.select(this).attr("cx") );
  }
}

Ответ 2

Метод фильтра в принятом ответе правильный. Второй подход в принятом ответе (с использованием .each) неверен и содержит ту же ошибку, что и вопрошающий: если .data() не вызывается (что здесь имеет место), тогда первый аргумент d передается на .each будет undefined (а не "текущий dom node", как ожидали бы все новички, включая меня); текущий dom node вы получаете через d3.select(это), что верно в самом утверждении if в самом конце - ошибка находится в условии if. Ниже приведена правильная версия.

d3.selectAll(".mynode").each(function(d,i){
    var elt = d3.select(this);
    if (elt.attr("id") == "yourTargetIdGoesHere"){
        console.log( elt.attr("cx") );
    }
});

скрипт: fiddle (содержащий код для обеих версий, т.е. фильтр и каждый)

UPDATE: мой ответ предполагал, что вы не использовали .data(), так как вы не дали код для этого; позже я увидел, что вы написали, что вы использовали .data()

в этом случае, в зависимости от вашей структуры данных, замена d.attr( "cx" ) на простой d.cx может работать.

Ответ 3

Существует еще более простой способ: (предоставляется указатель i)

d3.selectAll("circle")[0][i].attributes.cx.value

как можно видеть здесь.