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
Post a Comment