2015-05-21 15 views
1

Я работаю над инструментом визуализации, который использует svg-изображение мозга. Теперь у этого svg есть пути, которые заполнены цветом. Я хочу перебрать все эти пути, чтобы установить цвет заливки в белый цвет, но по какой-то причине я не могу получить элемент.Невозможно выбрать элемент svg с d3

Проект можно увидеть here. Svg находится внутри div, и я даже назначил идентификатор brain на div. Сам svg имеет идентификатор svg2. До сих пор я попытался следующие:

function clearBrainColors() { 
    var brain = d3.select("#svg2"); 
    console.log(brain); 
    var paths = brain.selectAll("path"); 
    console.log(paths.length); 
    brain.selectAll('path').each(function(d,i) { console.log(this); }); 
} 

Но он выдает нуль в массиве [0] компонент выбора и 0 с paths.length.

Я также попытался использовать линии, такие как

var brain = d3.select("#brain svg"); и var brain = d3.select("#brain svg#svg2");, но те не работают либо.

Итак, как я могу выбрать мозг svg с помощью d3?

+0

не является «точкой» вашего мозга? просто глядя на элементы в инструментах разработчика. у вас есть простая скрипка, чтобы посмотреть также ... – thatOneGuy

+0

Нет, это было бы точками внутри рассеянного экрана. – Gooey

+0

Мозг находится в отдельном документе, который вы загружаете с помощью тега ''. CSS не применяется к документам. Либо запустите d3 в самом SVG, либо сделайте SVG встроенным. –

ответ

0

Решено установить svg inline как оно apparently speeds things up.

Код я использовал для заполнения SVG сейчас:

$("#svg2").find("path").each(function(){ 
     $(this).css({ fill: "#ff0000" }); 
    }); 
0

Вы можете попробовать SetTimeout(), следуя примеру

setTimeOut(function() { 

    var brain = d3.select("#svg2"); 
    console.log(brain); 

}, 1000); 

это может быть SVG является генерировать на месте, d3 неспособный получить в тот момент.

Надеюсь, что эта помощь :)

Смежные вопросы