user2657817 user2657817 - 9 days ago 5
jQuery Question

Javascript: Add label at beginning and end of axes

I want to add to the beginning of the axes a label to indicate "not very important" and a label to the end of the axes "very important." I am using the following slider program: http://sujeetsr.github.io/d3.slider/.

As a beginner to JS, would appreciate your help on how it would be best to do that.

enter image description here

Answer

How about this:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" media="screen" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script>
</head>

<body>
  <div id="slider"></div>
  <script>
    
    var tickFormatter = function(d) {
      return d === 0 ? "not important" : "very important"
    }

    var slider = d3.slider().min(0).max(1).ticks(1).tickFormat(tickFormatter)
    d3.select('#slider').call(slider);
    
    d3.select(".tick>text").style("text-anchor", "start");
    d3.select(".tick:last-of-type>text").style("text-anchor", "end");
    
  </script>
</body>

</html>

Comments