3

好的，我一直在尝试根据数据集中的列数动态地将一些复选框附加到 div 中。所以我认为 d3 将是要走的路，只需将输入附加适当的属性和一些文本作为从数据确定的标签。我试过下面的代码；

d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter().append("input")
.attr("checked", true)
.attr("type", "checkbox")
.attr("id", function(d,i) { return i; })
.attr("onClick", "change(this)")
.attr("for", function(d,i) { return i; })
.text(function(d) { return d; });

这导致页面上有 4 个复选框，但没有标签。

真正奇怪的是，当我检查元素时，生成的 html 似乎就是我所追求的，如下所示。

<input checked="true" type="checkbox" id="0" onclick="change(this)" for="0">11</input>
<input checked="true" type="checkbox" id="1" onclick="change(this)" for="1">22</input>
<input checked="true" type="checkbox" id="2" onclick="change(this)" for="2">33</input>
<input checked="true" type="checkbox" id="3" onclick="change(this)" for="3">44</input>

当我在页面上使用它时，我得到的正是我所追求的。

我确定我错过了一些非常简单的东西，但是对于我的生活，我看不到它是什么。任何帮助感激地接受！

4

5 回答 5

5

您的主要问题是您不能在<input>这样的标签之间放置文本。它们像<input />. 您应该使用该<label>文本的元素。

另一个问题是 ID必须以字母开头（至少在 HTML5 之前），所以id="1"不起作用，但id=a1"可以。

也就是说，这段代码解决了这两个问题

d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter()
.append('label')
    .attr('for',function(d,i){ return 'a'+i; })
    .text(function(d) { return d; })
.append("input")
    .attr("checked", true)
    .attr("type", "checkbox")
    .attr("id", function(d,i) { return 'a'+i; })
    .attr("onClick", "change(this)");
于 2012-08-21T13:55:01.203 回答
2

如果您使用 - 它会起作用<label>-

d3.select("body").selectAll("input")
  .data([11, 22, 33, 44])
  .enter().append("label")
  .text(function(d) { return d; })
  .append("input")
  .attr("checked", true)
  .attr("type", "checkbox")
  .attr("id", function(d,i) { return i; })
  .attr("onClick", "change(this)")
  .attr("for", function(d,i) { return i; });
于 2012-08-21T13:44:09.303 回答
1

我知道这是一个很老的问题，但我想给出一个简单的解决方案，因为其他人不适合我......

您最初可以将标签附加到复选框，然后在完成之后您可以将文本添加到标签，然后将文本附加到复选框之后而不是之前：

d3.select("body").selectAll("input")
.data([11, 22, 33, 44])
.enter()
.append("label")
.append("input")
.attr("checked", true)
.attr("type", "checkbox")
.attr("id", function(d,i) { return i; })
.attr("onClick", "change(this)")
.attr("for", function(d,i) { return i; });

d3.selectAll("label").text(function(d) { return d; });
于 2017-06-27T12:10:41.557 回答
0

如前所述，您不能将文本添加到<input>标签中。我的解决方案是在 .html() 调用中添加复选框。像这样：

d3.select('body').selectAll('label')
  .data([11, 22, 33, 44])
  .enter().append('label')
  .html(function(d, i) {
    return '<input type="checkbox" checked=true id="' + i + '" onClick="change(this) for="' + i + '">' + d;
  })

希望这可以帮助！

于 2019-01-03T20:10:57.933 回答
0

另一种解决方案是使用spanelement 来容纳要显示在每个复选框右侧的文本。在这里，我们假设您有一个id=some_div要附加复选框的 div

var filter_controls_div_name="some_div";
var filter_controls__div=d3.selectAll("#"+filter_controls_div_name);
var date=null;
var field_value=null;
var field_value__list=[11,22,33,44];
for(var i=0;i<field_value__list.length;i++)
{
    field_value=field_value__list[i];
    var field__checkbox__div=filter_controls__div
        .append("div")
        .attr("class","checkbox")
    ;
    var field__checkbox__div__label=field__checkbox__div
        .append("label")
        .attr("class","field__label")
    ;
    var field__checkbox__div__label__input=field__checkbox__div__label
        .append("input")
        .attr("type","checkbox")
        .attr("checked","true")
        .attr("for",""+i)
        .attr("field_value",field_value)
        .attr("value",field_value)
    ;
    field__checkbox__div__label
        .append("span")
        .text(field_value)
    ;
    field__checkbox__div__label__input
        .on(
            "change"
            ,function(d)
            {
                var checkbox__element=d3.select(this);
                console.log((date=new Date()).toISOString()
                    +", checkbox__element.property(\"checked\") is:"+(checkbox__element.property("checked"))
                );
                if(checkbox__element.property("checked"))
                {
                    //do something when this checkbox is checked.
                }
                else
                {
                    //do something when this checkbox is unchecked.
                }
            }
        )
    ;
}
于 2020-06-29T19:06:58.750 回答