Question

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

我有两个组div（#RFL＆amp; #RFR），每个div包含两个div（分别是＃RFLL，＃RFLR，＃RFR，＃RFRR）。我想在每个'sub-DIV'下面放一个选择下拉列表 - 所有这些都将由二维数组填充。

诀窍是，每个'组'div的下拉列表应该相同。

即。在下面的代码中，

RFLL和RFLR应为1,2,3和 RFRL和RFRR应为A，B，C

我已经习惯了很久了。除了我想要的那个之外，我得到了所有安排的组合......下面的版本给了我两个选择框，每个“.RFSubPane” - 一个太多......我已经看到了文档中的部分以及{{3 }}

所有帮助/指针非常感谢！

<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

Cross-post with answer.完整：

你几乎得到了它。奇怪的是你的选择器出现了倒置：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; ]);

麦克

P.S。如果存在可变数量的子窗格，则可以使用 pane.each用于创建可以访问父数据的上下文，也许是这样的：

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

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

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

1 个答案: