Add html input value to the d3js

Question

I am trying to pass html input values to the d3js script to make it a little more dynamic visualization. Below is the script :

var svg = d3.select("svg"),
      width = +svg.attr("width");

  var format = d3.format(",d");

  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var pack = d3.pack()
      .size([width, width])
      .padding(1.5);

  //     function add() {
  //        rat = document.getElementsByName("ratings").value;
  //        chk = document.getElementsByName("checkins").value;
  //
  //   var sum = parseInt(rat) + parseInt(chk);
  //   alert(sum);
  // }

  console.log(d3.select("body"));

  d3.csv("austin_fsq.csv", function(d,ra,ch) {
    d.sno = +d.sno;
     if (d.sno && d.rating  >= 9 && d.value <= 500) return d;
// if (d.sno && d.rating  >= "+ra+" && d.value <= "+ch+") return d;
  }, function(error, classes) {
    if (error) throw error;

    var root = d3.hierarchy({children: classes})
        .sum(function(d) { return d.value; })
        .each(function(d) {
          if (id = d.data.id) {
            var id, i = id.lastIndexOf(".");
            d.id = id;
            d.package = id.slice(0, i);
            d.class = id.slice(i + 1);
          }
        });

    var node = svg.selectAll(".node")
      .data(pack(root).leaves())
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("id", function(d) { return d.id; })
        .attr("r", function(d) { return d.r; })
        .style("fill", function(d) { return color(d.package); });

    node.append("clipPath")
        .attr("id", function(d) { return "clip-" + d.id; })
      .append("use")
        .attr("xlink:href", function(d) { return "#" + d.id; });

    node.append("text")
        .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
      .selectAll("tspan")
      .data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); })
      .enter().append("tspan")
        .attr("x", 0)
        .attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
        .text(function(d) { return d; });

    node.append("title")
    .text(function(d) { return d.data.id + "\n" + format(d.value); });
  });

So if you see here :

     if (d.sno && d.rating  >= 9 && d.value <= 500) return d;

I have coded the values which I want to pick from html input element. I did try which I commented out below. What could I do to get this input element values for rating and value.Thank You.

Gerardo Furtado · Accepted Answer · 2017-02-15 01:56:44Z

1

Your question is missing one of the most important parts: the HTML of the input. So, I'll suppose you're using a simple number input, like this:

<input type="number">

To get the value of the number entered in this input with D3, select the input by tag, ID or class, and use this.value to get its value:

d3.select("#myInput").on("change", function(){
    console.log("The value is: " + this.value);
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<input id="myInput" type="number">

However, you have a additional problem here:

If you simply set the value to a variable, like this:

var myInput;
d3.select("#myInput").on("change", function(){
    myInput = this.value
})

You cannot use that variable inside your d3.csv row (also called accessor) function, because when the browser reaches d3.csv, the row function it will run regardless you have an input value or not, and the variable will be undefined in the second case.

That being said, the solution is calling your d3.csv function after the input has been entered. Wrap it in another function and call that function after you get an input:

var myInput:
d3.select("#myInput").on("change", function(){
    myInput = this.value;
    //call your chart function here
})

Then, you can use the input value:

if (d.sno && d.rating  >= myInput && d.value <= 500) return d;

edited Feb 15, 2017 at 1:56

answered Feb 11, 2017 at 8:45

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

SNT Over a year ago

I just did that and it still doesnt pick up the value from the html input: jsfiddle.net/r80cu9wa/1

Gerardo Furtado Over a year ago

It's hard to debug without a working code, but here you have "ratings" instead of "myInput": if (d.sno && d.rating >= ratings && d.value <= 500) return d;

Gerardo Furtado Over a year ago

Besides that, it is var myInput =, not var myInput:, which is a syntax error in JavaScript (this is one error which I saw, there can be others...). So, please provide a working code, then I can help you.

Gerardo Furtado Over a year ago

You still don't have a working code. Create a code that works without the input and I'll show you how to add the input.

SNT Over a year ago

I just put the code here :bl.ocks.org/senthilthyagarajan/2e879cdc95f6d3d447e8a95d6d676717 I want to get input for ratings and value from the html elements and also wanted to know if the same could be done for changing the csv so if I have a few different cities the use can select a city in the dropdown and the csv would change.Thanks for you help :)

|

Collectives™ on Stack Overflow

Add html input value to the d3js

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related