How to modify a value by selection in d3.js?

Question

I am trying to change the value of my progress bar.

var progressBar = d3.select("#current").append("input")
    .attr("class","loading")
    .attr("data-width","135")
    .attr("value","0");

When I do this :

progressBar.select("input").attr("value","5");

The value is not changed. What should I do ?

Answer 1

The problem with your code is that you already selected your input and bound it to the variable progressBar. So this piece of code you showed:

progressBar.select("input").attr("value", "5")

Effectively means:

d3.select("#current").select("input").select("input").attr("value", "5")

You're essentially selecting for an input within the input you created which doesn't exist.

---

Your code should work fine by simply using:

progressBar.attr('value', 5)

Answer 2

Try

var progressBar = d3.select("#current").append("input")
    .attr("class","loading")
    .attr("data-width","135")
    .val(0);