Question

我正在尝试在列表的每个复选框的左侧添加一个彩色矩形，这是由d3.js使用以下代码自动创建的：

d3.selectAll("#checkbox")
.selectAll("label")
.data(dataset, function (d) { return d.Grazie; })
.enter()
.append("div")
.attr("id", function (d) { return d.Grazie; })
.append("label")
.attr("class", "label")
.attr("id", function (d) { return d.Grazie; })
.text(function (d) { return d.Grazie; })
.append("input")
.attr({
    type: "checkbox",
    class: "Grazie",
    name: "mode",
    value: function (d, i) { return d.Grazie; }
})
.attr("id", function (d, i) { return d.Grazie; })
.attr("x", margin)
.attr("y", margin)
.attr("selected", null);

我尝试在此过程之后附加svg然后添加一个矩形，但我得到的是矩形放在文本和复选框之后，使用以下代码：

d3.select("#checkbox")
.select("#Sans")
.append("svg")
.attr("width", 8 + "px")
.attr("height", 8 +  "px")
.append("rect")
.attr("fill", function (d) { 
    if (d.Grazie == "Sans") { return "#386cb0"; } 
    else { return "#f0027f"}})
.attr("x", 0)
.attr("y", 0)
.attr("width", 8 + "px")
.attr("height", 8 + "px");

我想要的订单是：
矩形 - 文本 - 复选框
我想在创建复选框时可以集成矩形的代码，但是无法使其工作。非常感谢任何帮助，谢谢！

Answer 1

你应该像这样解决问题：

var entries = d3.select("#checkbox") // select is more appropriate than selectAll
  .selectAll("div.list-entry")
  .data(dataset, function (d) { return d.Grazie; })

var newEntries = entries.enter() // newEntries holds the result of .enter()
  .append("div")
  .attr("id", function (d) { return d.Grazie; })
  .attr("class", "list-entry")

newEntries // now you can append various stuff into each div in newEntries 
  .append("label")
  .attr("class", "label")
  .attr("id", function (d) { return d.Grazie; })
  .text(function (d) { return d.Grazie; })

newEntries
  .append("input")
  .attr({
      type: "checkbox",
      class: "Grazie",
      name: "mode",
      value: function (d, i) { return d.Grazie; }
  })
  .attr("id", function (d, i) { return d.Grazie; })
  .attr("x", margin)
  .attr("y", margin)
  .attr("selected", null);

然后您可以在标签创建代码之前插入矩形创建代码（遵循用于标签和输入创建的相同模式）。

但是......你有没有理由使用<svg>和<rect>制作一个简单的矩形？那很复杂。为什么不使用css宽度，高度，背景颜色和<div>或display:inline-block的普通旧float:left？

动态地将svg矩形添加到复选框

1 个答案: