Несколько партнеров в генеалогическом древе в d3.js?

У меня есть родословная из Отличный ответ Сирила, но я пытаюсь понять, как настроить его для поддержки нескольких партнеров. В этом случае я добавил узел «Госпожа» и пытаюсь обозначить, что у «Госпожи» и «Джона» был ребенок по имени «Скрытый сын».

Текущая структура данных работает следующим образом:

введите здесь описание изображения

При этом объект root хранит все. Он имеет массив children, который содержит самое старшее «поколение» без родителей. Он также содержит объект, который содержит дочерние элементы этих одноуровневых объектов/узлов. В приведенном выше примере это root.children[2].

Я думаю, мне придется реорганизовать структуру данных children и ввести информацию о том, от кого родился ребенок. Просто возникли проблемы с осмыслением этого, а также линии

Конец будет примерно таким, за исключением того, что госпожа будет слева:

введите здесь описание изображения


charts d3.js family-tree
person meder omuraliev    schedule 03.12.2015    source источник
comment
Привет @meder просто хотел сообщить вам, что я не получил вознаграждение, которое вы установили за этот вопрос ... похоже, оно перешло к сообществу :(   -  person Cyril Cherian    schedule 17.12.2015
comment
@Кирилл, как? Я выбрал твой ответ??   -  person meder omuraliev    schedule 17.12.2015
comment
Да, я задаю тот же вопрос в службу поддержки SO ?noredirect=1#comment283829_312544" title="я не получил награду за вопрос, на который я ответил">meta.stackoverflow.com/questions/312522/ он говорит, Поэтому ваш ответ не подходит для автоматического присуждения вознаграждение и может выиграть вознаграждение только в том случае, если владелец вознаграждения предпримет явные действия по присуждению его вам.   -  person Cyril Cherian    schedule 17.12.2015
comment
Связанное метаобсуждение.   -  person Jeroen    schedule 17.12.2015
comment
Я думаю, вам нужно не принять, а затем принять ответ ... Я считаю, что так это работает.   -  person Cyril Cherian    schedule 17.12.2015
comment
Хорошо сделал это. Также сделал новую награду.   -  person meder omuraliev    schedule 17.12.2015
comment
так что нужно подождать следующие 7 дней .. чтобы найти еще одну ошибку ТАК LOL   -  person Cyril Cherian    schedule 17.12.2015
comment
@meder meta.stackoverflow.com/questions/312522/   -  person ketan    schedule 17.12.2015
comment
Кстати, награда за награду (вам нужно подождать не менее двух дней) заключается в том, чтобы щелкнуть поле под галочкой на выбранном вами ответе. Автоматическое награждение работает только в том случае, если ответ был опубликован во время вознаграждения. В противном случае вы должны наградить вручную, установив флажок под галочкой. (Дайте мне знать, когда прочтете это, и я буду рад убрать этот комментарий.)   -  person Kendra    schedule 17.12.2015

Ответы (1)


arrow_upward
25
arrow_downward

@medder спасибо за оценку!

Для этого я добавил скрытый узел между Джоном и госпожой.

И добавил дочерний элемент к этому скрытому узлу, так что кажется, что у Джона и госпожи есть ребенок «Скрытый сын». Таким образом, JSON выглядит так

{
    name: "Mistress",
    id: 9000,
    no_parent: true
  }, {
    name: "",//this is the new node between Mistress and John
    id: 100,
    no_parent: true,//it has no parents
    hidden: true,
    children: [{
      // so this hidden node will have a child 
      // which will make it appear as if john and mistress has a child.
      name: "Hidden Son",
      id: 9001
    }]
  }, {
    name: "John",
    id: 16,
    no_parent: true
  },

Рабочий код здесь

Надеюсь это поможет!

person Cyril Cherian    schedule 04.12.2015
comment
Я понимаю. Итак, необходимо ли, чтобы этот скрытый дочерний объект находился между родительскими объектами в списке? Я все еще пытаюсь понять ваш код. - person meder omuraliev; 04.12.2015
comment
Кстати, как бы вы центрировали текст, если он выходит за пределы поля? - person meder omuraliev; 04.12.2015
comment
Ага! нужно поместить скрытый узел между ними, чтобы создать визуальное впечатление, что дети принадлежат Джону и госпоже. - person Cyril Cherian; 04.12.2015
comment
Строка № 19-21 в jsfiddle.net/cyril123/fcd5q8fv/1 определяет позицию x для текста... я написал некоторую бизнес-логику, чтобы центрировать его. вы можете изменить его в соответствии с требованиями jsfiddle.net/cyril123/fcd5q8fv/1 - person Cyril Cherian; 04.12.2015
comment
удивительный. ценить это. - person meder omuraliev; 04.12.2015
comment
jsfiddle.net/fcd5q8fv/7 Я пытаюсь сделать более масштабную версию этого. Не знаете ли вы, как сделать линию от бабушки и дедушки Джона ближе к нему? или бывшая жена 3 прямо поверх скрытого сына 3? Или, если у вас есть какие-либо подсказки/идеи в целом о том, как масштабировать это, я могу попробовать, или порекомендовать другую технологию, которая была бы отличной. - person meder omuraliev; 05.12.2015
comment
Кроме того, если бабушки нет, а есть только дедушка, все еще быть в центре? - person meder omuraliev; 05.12.2015
comment
Я вижу, что все дети подключены к бабушке ... вы не создали скрытый узел между ними ... ну, макет задается древовидным макетом, поэтому я делаю трюки, такие как добавление пустого узла, чтобы центрировать его. - person Cyril Cherian; 05.12.2015
comment
Давайте продолжим обсуждение в чате. - person meder omuraliev; 05.12.2015
comment
Поддерживает ли это динамическое добавление родителя? - person Zaheer Khorajiya; 27.04.2017
comment
@ZaheerKhorajiya, в этом случае вам нужно снова очистить + перерисовать дерево ... - person Cyril Cherian; 27.04.2017
comment
Можете ли вы показать мне, как динамически добавлять родителей? - person Zaheer Khorajiya; 27.04.2017