Невозможно выбрать элемент SVG foreignObject в d3

Я работаю с синтаксическим расположением d3 с ярлыками HTML node, реализованными с элементами SVG foreignObject. Я хотел бы выбрать эти элементы в разное время, чтобы обновить их позиции и другие свойства (и отслеживать их по мере их создания и уничтожать с помощью enter() и exit()), но я, кажется, не могу их выбрать как и другие элементы SVG.

Вот компактный пример:

HTML:

<html>
    <head>
        <title>Cannot Select SVG Foreign Object</title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <script src = "fo_select.js"></script>
     </head>
     <body>
         <svg id="example_svg" width="600" height="600">
               <g>
                  <circle r="40" cx = "80" cy="80"></circle>
                  <foreignObject width = "100" height = "100" x = "200" y="200">
                         <body>Hello, world</body>
                  </foreignObject>
               </g>
         </svg>
         <script>run()</script>
     </body>
</html>

JavaScript:

function run() {
    svg = d3.select("#example_svg");
    console.log(svg.selectAll("circle"));
    console.log(svg.selectAll("foreignObject"));
}

Это также находится на http://bl.ocks.org/3217448. Выход консоли:

[Array[1]]
[Array[0]]

где первый массив содержит элемент circle, а второй - пуст. Почему объект circle можно выбрать, но foreignObject нет? Я предполагаю, что это связано с необычным характером foreignObject. Как я могу выбрать его, чтобы манипулировать им в моем коде? Большое спасибо.

Ответ 1

Строго говоря, SVG чувствителен к регистру, поэтому вы должны использовать <foreignObject> вместо <foreignObject>.

Более серьезно, однако, есть открытая ошибка в WebKit, которая запрещает выбирать элементы camelCase.

Одним из возможных способов решения проблемы является использование:

.selectAll(function() { return this.getElementsByTagName("foreignObject"); })

(Возможно, это не работает в старых версиях WebKit, см. теперь закрытую ошибку WebKit 46800.)

В качестве альтернативы вы можете использовать классы или идентификаторы CSS и вместо этого выбирать свои элементы. Я бы рекомендовал этот подход на данный момент, если это возможно, учитывая различные вышеупомянутые ошибки.

Ответ 2

Вы должны уметь d3.selectAll( "foreignObject" ) или svg.selectAll( "foreignObject" ). Возможно, это дополнительная запятая в ваших атрибутах foreignObject (между x и y). Я только вставлял элементы foreignObject с помощью D3, так что, возможно, есть что-то, что встраивает их как это, что разные.