Застрял с D3.js - использование многомерного массива для заполнения выбранных выпадающих - PullRequest
Новая
       15

Застрял с D3.js - использование многомерного массива для заполнения выбранных выпадающих

2 голосов
/ 09 января 2012

D3.js просто великолепен, но я застрял на том, что должно быть очень простым.

У меня есть два div группы (#RFL & #RFR), содержащих по два div каждый (#RFLL, #RFLR, #RFRL, #RFRR соответственно).Я хочу поместить выпадающий список под каждым «sub-DIV» - все из которых должны быть заполнены двумерным массивом.

Хитрость в том, что выпадающие списки для каждого div «group» должны быть идентичны.

т.е. в приведенном ниже коде

RFLL и RFLR должны быть 1, 2, 3, а RFRL и RFRR должны быть A, B, C

Я возилсяс этим долго.Я получаю все комбинации аранжировок, кроме той, которая мне нужна ... в приведенной ниже версии есть два поля выбора для каждого ".RFSubPane" - слишком много ... Я видел раздел в документации, а также http://christopheviau.com/d3_tutorial/

Вся помощь / указатели очень ценятся! 

<script>
var l1 = ["1", "2", "3"];
var l2 = ["A", "B", "C"];
var labels = [l1, l2];

function d3test()
{
    d3.selectAll(".RFSubPane")
        .selectAll(".RFPane")
        .data(labels)
       .enter()
        .append("select")
        .selectAll("option")
        .data(function (d) {return d;})
       .enter()
        .append("option")
        .text(String);
}
</script>

<div class="RFPane"  id="RFL" style="float: left; background: green;">
    RFL
    <div class="RFSubPane" id="RFLL" style="float: left; background: blue;"></div>
    <div class="RFSubPane" id="RFLR" style="float: right; background: gray;"></div>
</div>
<div class="RFPane"  id="RFR" style="float: right; background: red;">
    RFR
    <div class="RFSubPane" id="RFRL" style="float: left; background: blue;"></div>
    <div class="RFSubPane" id="RFRR" style="float: right; background: gray;"></div>
</div>

1 Ответ

5 голосов
/ 10 января 2012

Кросс-пост с ответом. В целом:

Ты почти понял. Странно то, что ваши селекторы кажутся быть инвертированным: RFSubPane находится внутри RFPane, поэтому вы должны выбрать сначала панели Есть две панели, так что вы можете присоединить их к своему массив двухэлементных меток: 

var pane = d3.selectAll(".RFPane")
    .data(labels);

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

var subpane = pane.selectAll(".RFSubPane")
    .data(function(d) { return [d, d]; });

Теперь вы можете создать элемент select и, расширив данные массив, дочерние параметры: 

subpane.append("select").selectAll("option")
    .data(function(d) { return d; })
  .enter().append("option")
    .text(function(d) { return d; ]);

Mike

P.S. Если существует переменное количество подпанелей, вы можете использовать pane.each, чтобы создать контекст, в котором вы можете получить доступ к родительским данным, может быть так: 

pane.each(function(d, i) {
  var subpane = d3.select(this).selectAll(".RFSubPane");
});

В этом случае вам на самом деле не нужно привязывать данные к подпанелям, и вы можете сказать selectAll("option").data(d) вместо того, чтобы использовать функция.

...