添加复选框与d3时添加标签时出现问题 [英] trouble adding label when appending checkbox's with d3

问题描述

OK我一直试图根据数据集中的列数动态添加一些复选框到div。所以我认为d3将是要走的方式，只是附加输入与适当的属性和一些文本从数据确定的标签。我试过下面的代码;

  d3.select（body）。selectAll（input）
 .data（[11，22，33，44]）
 .enter（）。append（input）
 .attr（checked，true）
 .attr类型，复选框）
 .attr（id，function（d，i）{return i;}）
 .attr（onClick，change $ b .attr（for，function（d，i）{return i;}）
 .text（function（d）{return d;}）; 
  

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

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

 < input checked =truetype =checkboxid =0onclick =change（this）for =0> 11&输入> 
< input checked =truetype =checkboxid =1onclick =change（this）for =1> 22< / input& 
< input checked =truetype =checkboxid =2onclick =change（this）for =2> 33< / input& 
< input checked =truetype =checkboxid =3onclick =change（this）for =3> 44< / input& 
  

当我在页面上使用这个时候，我得到了我以后的。

我相信我错过了一些非常简单的东西，但对我的生活我看不出它是什么。

解决方案

您的主要问题是您不能在< ; input> 这样的标签。它们是自动关闭的，如< input /> 。您应该为该文本使用< label> 元素。

其他问题是ID必须以字母开头（至少在HTML5之前），因此 id =1无效，但 id = a1

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

  d3.select（body）。selectAll（input）
 .data（[11，22，33，44]）
 .enter $ b .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））; 
  / pre> 
OK I’ve been trying to append some checkbox’s to a div dynamically based on the number of columns in a dataset. So I thought d3 would be the way to go, simply append the input with the appropriate attributes and some text for the label determined from the data.  I’ve tried the following code;
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; });
Which results in 4 checkboxs on the page but no labels.  

What’s really strange is that when I inspect the elements the html generated seems to be what I’m after as shown below.
<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>
When I use this on a page I get exactly what I’m after.

I’m sure I’m missing something extremely simple, but for the life of me I can’t see what it is.  Any help gratefully accepted!
解决方案
Your main problem is that you can't put text in between <input> tags like that. They are self-closing like <input />. You should use the <label> element for that text.

Other problem is that ID's must begin with a letter (at least, before HTML5), so id="1" won't work, but id=a1" will.

That said, this code solves those two problems
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)");


                        
这篇关于添加复选框与d3时添加标签时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！