score:3

Accepted answer

You can do :

 var textNode = lastTick.select('text');
 textNode.text('$' + textNode.text());

Another way to proceed would be to use the .tickFormat method.

var nbTicks = 5;
var axis = d3.svg.axis()
    .ticks(nbTicks)
    .tickFormat(function(d, i) {
        if(i == nbTicks) {
            return '$' + d;
        }
        return d;
    });

The problem with this method is that the doc for linear.ticks (used to generate the correct number of ticks) tells us :

The specified count is only a hint; the scale may return more or fewer values depending on the input domain.

References:

score:1

Starting from the example you could do

svg.selectAll(".tick text").each(function (data) {
  var tick = d3.select(this);
  tick.text("$"+tick.text());
});

All together:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
  .axis text {
    font: 10px sans-serif;
  }

  .axis line,
  .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
</style>

<body>
  <script src="d3.min.js"></script>
  <script>
    var margin = {
        top: 250,
        right: 40,
        bottom: 250,
        left: 40
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.time.scale()
      .domain([new Date(2012, 0, 1), new Date(2013, 0, 1)])
      .range([0, width]);

    var xAxis = d3.svg.axis()
      .scale(x);

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .attr("y", 0)
      .attr("x", 9)
      .attr("dy", ".35em")
      .attr("transform", "rotate(90)")
      .style("text-anchor", "start");

    svg.selectAll(".tick text").each(function (data) {
      var tick = d3.select(this);
      tick.text("$"+tick.text());
    });
  </script>
</body>

</html>

Just add your prototype to get the last element.


Related Query

More Query from same tag