Javascript:在轴的开头和结尾添加标签

时间:2016-11-25 21:10:58

标签: javascript jquery d3.js

我想在轴的开头添加一个标签来表示“不是很重要”,并在轴的末端添加标签“非常重要”。我使用以下滑块程序:http://sujeetsr.github.io/d3.slider/

作为JS的初学者,非常感谢您提供有关如何做到这一点的帮助。

enter image description here

1 个答案:

答案 0 :(得分:3)

这个怎么样:

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