javascript - Can I give the text and line elements that make up a D3 axis unique classes? -


in d3, when creating axes, possible assign class each line , text element in g.tick?

i'm looking end axis rendered this:

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

i see can select svg, append g element , call yaxis. how generate classes line/text elements within them?

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); 

you can implement by:

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

however, can style axis line/text directly instead of via classes, such as:

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

Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -