坚持使用D3.js - 使用多维数组填充选择下拉列表

Question

D3.js非常棒,但我坚持应该非常简单.

我有两个组div(#RFL和#RFR),每个div包含两个div(分别是#RFLL,#RFLR,#RFR,#RFRR).我想在每个'sub-DIV'下面放一个选择下拉列表 - 所有这些都将由二维数组填充.

诀窍是,每个'组'div的下拉应该是相同的.

即在下面的代码中,

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>                  

Answer 1

交叉回答.完整的:

你几乎得到了它.奇怪的是你的选择器似乎是倒置的:RFSubPane在RFPane中,因此你应该首先选择窗格.有两个窗格,因此您可以将它们连接到您的双元素标签数组:

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

现在,如果我理解正确,您希望使用窗格基准中的选项为每个子窗格添加一个选择元素.由于您使用的是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; ]);

麦克风

PS如果存在可变数量的子窗格,则可以使用pane.each创建可以访问父数据的上下文,可能如下所示:

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

在这种情况下,您实际上不需要将数据绑定到子窗格,您可以说selectAll("option").data(d)而不是使用函数.