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

Issue

I'm trying to create an select element that has width="347px" and id="select-box-1", this element is created from .append("select"), I already tried to search about .append() but the explanation led me to an attempt that failed.

Failed Attempt:

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

Original part of my script that creates the .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")

Note: this function works with D3.js

Full script in case to tests:

<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>

Solution

In D3 selection.append() receives either a string representing the type of element (eg, "select", not a string representing the html of an element) or a function. The string you provide is not a tag, so it doesn't work.

D3's attr and style methods are intended to set both attributes such as id and styles such as width. You do this when you set the value of the options: .attr("value", - we can do the same with id:

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

And with width:

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

Which provides us with:

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>

Alternatively, we could pass a function to .append which is a bit more fancy, but offers no tangible benefits in this case.

---

Based on the comment on updating, here's a quick demo using 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>

Answered By - Andrew Reid

Answer Checked By - Robin (PHPFixing Admin)