Селектор d3 для непосредственных детей

Я, очевидно, могу это сделать:

d3.selectAll('div#some-div>ul')

Но что, если я использую DOM node или существующий выбор D3:

d3.select(this).selectAll('ul')

доставит мне все последующие UL. Итак, если

var div = d3.select('div')

получил мне этот node:

<div>
  <ul>
    <li>foo
      <ul><li>bar</li></ul>
    </li>
  <ul>
</div>

Тогда

var uls = div.selectAll('ul')

получит мне два UL. Наверное, я мог бы отличить верхний уровень, например:

uls.filter(function() { return this.parentNode === div.node() }

Итак, я ответил на свой вопрос. Может быть, кому-то это будет полезно. Или, может быть, кто-то может рекомендовать менее уродливое решение.

nrabinowitz ответ ниже лучше и возвращает идентичные результаты моим выше. Здесь пересмотренная скрипка, которая их сравнивает (но не использует console.log, который действует для меня в jsfiddle)

Ответы

Ответ 1

Я бы не ожидал, что это сработает, но похоже, что D3 будет подбирать любой элемент, который является дочерним элементом выбора, и соответствует селектору - так что это работает:

d3.select(this).selectAll('div > ul');

См. http://jsfiddle.net/g3aay/2/

Ответ 2

Если кому-то все еще интересно, d3.select(this.childNodes) помог мне решить мою проблему для того, чтобы собрать всех ближайших детей. Кроме того, вы можете использовать

selection.select(function(){
  return this.childNodes;
})

Ответ 3

Решение @nrabinowitz не работает все время.

В моем случае я пытался сделать d3.select(this).selectAll(".childNode > *").

Итак, я пытался получить всех непосредственных детей .childNode. Проблема в том, что это был вложенный стек, поэтому .childNode также мог появиться у детей, что вызывало проблемы.

Лучший способ найти:

var child = d3.select(this).select(".childNode");
var sel = d3.select(this).selectAll(".childNode > *").filter(function() { 
    return this.parentNode == child.node();
});