Question

我正在尝试编写一个函数来选择此轴的最后一个刻度内的文本，并在其前面添加一个“$”（这样在这种情况下文本为100美元）

到目前为止，我已经使用这个原型来选择最后一个滴答：

d3.selection.prototype.last = function() {
  var last = this.size() - 1;
  return d3.select(this[0][last]);
};

//first I select all of the ticks:
var tickLabels =  d3.selectAll("g.cardbasegroup g.yaxis g.tick");

//and then use that prototype to select the last one:
var lastTick = tickLabels.last();

...但是现在如何在该刻度内抓取该文本并添加“$”？

Answer 1

你可以这样做：

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

另一种方法是使用.tickFormat方法。

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

此方法的问题是linear.ticks的文档（用于生成正确的刻度数）告诉我们：

指定的计数只是一个提示;根据输入域，比例可能会返回更多或更少的值。

参考文献：

Answer 2

从你可以做的example开始

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

所有在一起：

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

只需添加原型即可获得最后一个元素。

D3.JS尝试在轴

2 个答案: