dynamically naming the axis in scatterplot d3.js

Question

How can we dynamically assign variable names to x and y axis in scatterplot? This is one of the example that I have taken from this site

D3.js x-axis time scale

The axis has been named Date and value which comes from the line number 109 and 121 respectively of jsfiddle.

      .text("Date");
      .text("Value");

In case of using different datasets, how can we change these value dynamically as per the user selection. I mean to say, I am working on an application wherein user selects the data and scatterplot updates itselves.

Answer 1

What you can do is provide an id on the text element of the axis, like so:

svg.append("g")
   .attr("class", "y axis")
   .call(yAxis)
   .append("text")
   .attr("class", "label")
   .attr("transform", "rotate(-90)")
   .attr("y", 6)
   .attr("dy", ".71em")
   .style("text-anchor", "end")
   .attr("id","my-axis-name")
   .text("Value");

So once you change the dataset using a button for instance, in your control sequence you could add:

 function myCoolUpdateFunction() {
     // Do stuff, e.g.
     svg.selectAll('circle').style("fill","red");

     //change the text of the axis
     svg.select('#my-axis-name').text("New Description")
 }

Hope this helps.