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"})

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