Question

在D3中，创建轴时，是否可以为g.tick中的每一行和文本元素分配一个类？

我希望最终得到一个像这样的轴：

<g class="yAxis" style="transform: translate(617px, 2em);">
    <g class="tick" style="opacity: 1;" transform="translate(0,0)">
     <line class="foo" x2="-555" y2="0">
     <text class="foo" dy=".32em" style="text-anchor: start;" x="3" y="0">2012</text>
    </g>
   <g class="tick" style="opacity: 1;" transform="translate(0,21.64860000000002)">
    <line class="bar" x2="-555" y2="0">
    <text class="bar" dy=".32em" style="text-anchor: start;" x="3" y="0">2013</text>
   </g>
</g>

我看到我可以选择SVG，附加一个g元素并调用yAxis。我如何为其中的行/文本元素生成类？

var yTickLabels = ["2012","2013"];

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("right")  
    .ticks(25)
    .tickSize(-width * 0.5)
    .tickFormat(function(d,i){
      return yTickLabels[i];
});

svg
 .append("g")
 .attr({
    "class" : "yAxis"
  })
  .style({
    "transform" : function () {
      return "translate(" + ((width/2) + 62) + "px,2em)";
    }
  })
  .call(yAxis);

Answer 1

您可以通过以下方式实施：

var yAxis = svg.append('g')
.attr("class", "y axis")
.call(yAxis);

yAxis.selectAll("text")  
 .attr("class", "axis-text");

yAxis.selectAll("line")  
 .attr("class", "axis-line");

但是，您可以直接设置轴线/文本的样式，而不是通过类，例如：

var yAxis = svg.append('g')
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")  
 .attr("y", 3)
 .attr("x", -10)

我可以给构成D3轴唯一类的文本和线元素吗？

1 个答案: