3

OK データセット内の列の数に基づいて、いくつかのチェックボックスを動的に 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>そのテキストには要素を使用する必要があります。

もう 1 つの問題は、ID が文字で始まる必要があることです(少なくとも、HTML5 より前でid="1"は) id=a1"。

とはいえ、このコードはこれら2つの問題を解決します

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 に答える