如何定义 .append() 创建的元素的宽度和 id？

Question

我正在尝试创建一个包含 width="347px" 和 id="select-box-1" 的 select 元素，该元素是从 .append("select") 创建的，我已经尝试搜索 .append() 但解释让我尝试失败。

尝试失败：

.append("<select id='select-box-1' style='width: 347px'></select>")

创建 .append():

的脚本的原始部分

<script src="http://d3js.org/d3.v3.js"></script>
<script id="script-da-caixa-de-selecao-suspensa-1">
    function caixasuspensa1(error, data) {
      var select = d3.select("#caixa-suspensa-1")
        .append("select")

注意：此函数适用于 D3.js

用于测试的完整脚本：

<script src="http://d3js.org/d3.v3.js"></script>
<script id="script-da-caixa-de-selecao-suspensa-1">
    function caixasuspensa1(error, data) {
      var select = d3.select("#caixa-suspensa-1")
        .append("select")
    
      select
        .on("change", function(d) {
          var value = d3.select(this).property("value");
          document.querySelector('#barra-de-texto-para-radar-1').value = value;
          document.getElementById('botao-do-radar-1').click();
        });
    
      select.selectAll("option")
        .data(data)
        .enter()
          .append("option")
          .attr("value", function (d) { return d.value; })
          .text(function (d) { return d.label; });
    }
    
    d3.csv("Lista_de_Jogos.csv", function(error, data){caixasuspensa1(error, data)});
</script>

Answer 1

您可以尝试附加到 innerHTML:

document.body.innerHTML+="<select id='select-box-1' style='width: 347px'></select>";

或使用insertAdjacentHTML():

document.body.insertAdjacentHTML("afterend", "<select id='select-box-1' style='width: 347px'></select>");

Answer 2

create an select element that has width="347px" and id="select-box-1"

我想最好的方法是创建一个新元素并使用 setAttribute() 设置样式并放置其 id:

let select = document.createElement("select");

select.setAttribute("id", "select-box-1");
select.setAttribute("style", "width: 347px;");

document.body.append(select);

<body></body>

或者：

let select = document.createElement("select");

select.id = "select-box-1";
select.style.width = "347px";

document.body.append(select);

<body></body>

Answer 3

在 D3 中 selection.append() 接收表示元素类型的字符串（例如，“select”，而不是表示元素 html 的字符串）或功能。您提供的字符串不是标签，因此不起作用。

D3 的 attr 和 style 方法旨在设置 id 等属性和 width 等样式。当您设置选项的值时执行此操作：.attr("value", - 我们可以对 id:

执行相同的操作

.attr("id","select-box-1")`

宽度为：

 .style("width","347px")

这为我们提供了：

var select = d3.select("body")
  .append("select")
  .attr("id","select-box")
  .style("width","347px");
  
select.selectAll(null)
  .data([1,2,3,4])
  .enter()
  .append("option")
  .text(d=>d)
  .attr("value",d=>d);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

或者，我们可以将一个函数传递给 .append，这有点花哨，但在这种情况下没有提供任何实际好处。

根据对更新的评论，这里有一个使用 selection.join 的快速演示：

var select = d3.select("body")
  .append("select")
  .attr("id","select-box")
  .style("width","347px");
  
var data = [1,2,3,4]
  
function update(data) {
  
  select.selectAll("option")
    .data(data)
    .join("option")
    .text(d=>d)
    .attr("value",d=>d);
    
}

// load initial data:
update(data);


// generate new data and pass to update();
d3.select("body")
  .append("button")
  .text("update options")
  .on("click", function() {
    var min = Math.floor(Math.random() * 4);
    var length = Math.round(Math.random() * 3 + 3)
    data = d3.range(length).map(d=>d+min);
    update(data);
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

如何定义 .append() 创建的元素的宽度和 id？

How to define the width and id of an element created by .append()?

html

javascript

append

d3.js