d3 вложил выбор: как получить доступ к данным массива

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

Я имею: вложенная json структура, которая представляет филогенетическое дерево (с разновидностями)

    {
   "name" : "Sauria",
   "children" : [
      {
         "domains" : [
            {
               "name" : "BRCA2",
               "domain_start" : 100,
               "domain_stop" : 240
            }
         ],
         "common_name" : "NaN",
         "seq_length" : 200,
         "duplication" : "N",
         "name" : "ENSMGAP00000010132",
         "class" : "leaf",
         "bootstrap" : "NaN",
         "taxon" : "Meleagris_gallopavo"
      },
      {
         "domains" : [
            {
               "name" : "BRCA2",
               "domain_start" : 100,
               "domain_stop" : 240
            }
         ],
         "common_name" : "NaN",
         "seq_length" : 200,
         "duplication" : "N",
         "name" : "ENSACAP00000006049",
         "class" : "leaf",
         "bootstrap" : "NaN",
         "taxon" : "Anolis_carolinensis"
      }
    ],
   "bootstrap" : "15",
   "taxon" : null,
   "common_name" : "NaN"

Чтобы получить все узлы и связать мои данные, я делаю

 var node = d3.select("#tree svg").selectAll("g.node").data(nodes, function(d) { return d.id || (d.id = ++i); });

Тогда я добавляю группы к каждому использованию узла

 var nodeEnter = node.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });

Я тяну прямоугольник для каждого листа как это

 var div3 = nodeEnter.append("rect")
            .attr("x", 192)
            .attr("y", 160)
             .attr("width", function(d){return d.children ? "":"10";})
             .attr("height", function(d){
                   return d.children ? "": domainOnlyScale(d.seq_length);
            })
           .attr("transform", function(d){return d.children ? "":"rotate(-90 100 100)";})
           .attr("fill", function(d){return d.children ? "":"grey";});

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

   "domains" : [
        {
           "name" : "BRCA2",
           "domain_start" : 100,
           "domain_stop" : 240
        }
     ],

Я просто не знаю, как повторить по всем листьям, и по каждому элементу множества областей (обратите внимание, что у этого множества может быть несколько записей). Таким образом, когда я пытаюсь использовать "каждого"

 div3.each(function(d) {    
        [d.domains].each(function(dom){
                    d3.select(this)
                   .append("rect")
                   .attr("x", 230)
                   .attr("y", 175)
                   .attr("rx", 5)
                   .attr("ry", 5)
                   .attr("width", function(d){return "12";})
                   .attr("height", function(d){
                        console.log("here we go again: "+d.name+" has length: "+(d.domains.seq_stop - d.domains.seq_start));
                           //var randomnumber=Math.floor(Math.random()*11)
                           return dom.domain_start;
                    })
                    .attr("fill", function(d){return d.children ? "":"red";})
       })
       });

d3 говорит мне, что "Объект [у Объекта объекта] нет метода 'каждый'", но я, хотя d.domains был множеством.

Можно ли помочь мне получить доступ к этой вложенной информации "об области"?

Большое спасибо!

1
nl ja de

1 ответы

Во вложенном выборе необходимо передать вложенные данные как аргумент данные() функция выбора. Таким образом вместо того, чтобы делать div3.each , это выглядело бы примерно так.

div3.selectAll("rect").data(function(d) { return d.domains; }).enter()
    .append("rect")
    ...

Необходимо быть в состоянии использовать остальную часть неизменного кода.

3
добавлено
Вы могли добавить прямоугольники, которыми вы хотите быть на фронте сначала. Спасите выбор в переменной и приложите в заказе, который вы хотите.
добавлено автор Lars Kotthoff, источник
Да, но вы делаете это после добавления другого материала. Все, что необходимо должны быть сделать, изменить заказ заявлений, которые прилагают вещи:)
добавлено автор Lars Kotthoff, источник
Не совсем уверенный, что you' ре, пытающееся сделать там. Вторая вставка прямоугольников после линии 193 ничего не делает, однако, потому что you' ре, связывающее его с уже существующими данными и использующее .enter() выбор. I' ve обновил его здесь удаляя привязку данных и фиксируя путь длина вычисляется. Это ближе к тому, что вы хотите?
добавлено автор Lars Kotthoff, источник
Как это jsfiddle.net/HRHZz/3? Необходимо действительно заменить все те твердые закодированные ценности положения все же.
добавлено автор Lars Kotthoff, источник
хороший, который работает. Спасибо!, Но в настоящее время, я добавляю реагирование как ребенок к реагированию, и добавленное реагирует, кажется, скрыт позади во-первых созданных. Как я могу избежать этого? HTML похож на это: <реагируют x = "192" год = "160" ширина = "10", высота = "100" преобразовывает =, "вращаются (-90 100 100)", заполняются = "серый"> <реагируют x = "230" год = "175" rx = "5" ридбергов = "5" ширина = "12", высота = "140" заполняется = "красный">
добавлено автор Gustav, источник
точно, но isn' t это, что я делаю? Я экономлю выбор в переменной "div3" и прилагаю дальнейшие прямоугольники с div3.selectAll ("rect") .data (...) Извините за беспорядок.
добавлено автор Gustav, источник
Спасибо за вашу помощь до сих пор. К сожалению, это все еще не работает. Мне удалось поместить весь мой код в jsfiddle. Возможно, у вас мог быть беглый взгляд здесь? Важная часть начинается в линии 193. Большое спасибо!
добавлено автор Gustav, источник
Вот a скрипка из того, на что я был бы прямоугольники, чтобы быть похожим. Так, 1. создайте длинный прямоугольник длины "seq_length", и 2. приложите прямоугольник для каждой области. Вы видите то, что я имею в виду?
добавлено автор Gustav, источник
очень прохладный! Большое спасибо, Ларс. Это точно, что я хотел. Я избегу трудно закодированных ценностей положения как можно больше
добавлено автор Gustav, источник
D3.js — русскоговорящее сообщество
D3.js — русскоговорящее сообщество
57 участник(ов)

Чат для вопросов по d3.js