Как получить данные родительского node в d3.js

Ответ 1

d3.select(this).node() совпадает с просто this в контексте функции, переданной в выборку D3. Вы можете переделать его так: d3.select(this.parentNode).datum() и вернуть правильное значение без использования уродливого свойства двойного подчеркивания.

Ответ 2

Другим способом, с которым я знаком, является использование .each() для родителя, а затем обращение с дочерними элементами в закрытии:

d3.selectAll('.parent').each(function(parentDatum) {
    d3.select(this).selectAll('.child').each(function(childDatum) {
        // do stuff with parentDatum and childDatum here
    });
});

Ответ 3

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

[
  {
    title: "Google",
    link: "www.google.com",
    languagePath : "en,fr,it"
  },

  ...
]

Чтобы помочь объяснить, я использовал это в контексте таблицы с двумя столбцами. Первый столбец имеет title, а второй столбец имеет a для каждого из элементов accept-language.

Итак, я сделал подвыборы раскола languagePath и для каждого вызова enter я создал бы a с текстом, являющимся языком.

Итак, в этот момент мне также понадобится link, так что элементы a выглядят так:

<a href="www.google.com/en">EN</a>
<a href="www.google.com/fr">FR</a>

Но link не является частью данных, переданных этому ребенку, поэтому, когда я сделал выбор, а не делал:

var langLinks = tableRow
     .append("td")
     .selectAll("span")
     .data(function(d) {
        return d.languagePath.split(",")
      })

Я сделал

 var langLinks = tableRow
     .append("td")
     .selectAll("span")
     .data(function(d) {
        return d.languagePath.split(",").map(function(item) {
                 return {
                   lang : item,
                   link : d.link
               })
      })

Итак, когда я обрабатываю data в enter() этого выбора, у меня есть родительские данные.

Надеюсь, что это подходящая альтернатива для некоторых из вас, это помогло мне.