d3.axis 文本的多种文本锚样式

Question

我有一个简单的轴设置：

var timelines = g2.selectAll(".timelines").data(data);

      var xScale = d3.scale.ordinal()
        .domain(dataset)
        .range([0,axisSpacing.width]);

      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
          .ticks(1)
          .tickFormat(axisTicks)
          .outerTickSize(0)
          .tickSize(0);

      timelines.enter().append("g")
          .attr("class", "axis")
          .attr('transform',function(d,i) { return "translate(" + axisSpacing.left + "," + (axisSpacing.top + (i * spacing)) + ")"})
          .call(xAxis)
            .selectAll("text")
            .attr("dy","20px")
            .attr('class',"axis-text")

我想对刻度文本应用多种样式。第一个刻度的一种样式；另一种风格，用于之后的滴答声。我怎样才能做到这一点？

Answer 1

我决定采用此解决方案：

d3.selectAll(".axis-text").style("text-anchor",function(d,i){ return i%2 ? "end" : "start"})

如果轴上有两个刻度，这会将两个刻度标签都放在轴长度的内侧。见下文：

d3.axis 文本的多种文本锚样式

Multiple text-anchor styles for d3.axis text

javascript

css

svg

d3.js