javascript - D3 V4, How can I have a tick mark at every data point, but a label at only select data points -
as can see image i'm using monthly data. i'm trying find way display every tick mark, april month labels. example: apr 2014, apr 2015, apr 2016 , apr 2017 - , keep tick marks in between. in advance.
g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisbottom(x).ticks(d3.timemonth.every(1)) .tickformat(d3.timeformat("%b %y") ) ); g.select('.axis.axis--x') .selectall("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)" );
thanks sira, ended with:
g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisbottom(x).ticks(d3.timemonth.every(1)) .tickformat(d3.timeformat("%b %y") ) ); g.select('.axis.axis--x') .selectall("text") .style("text-anchor", "end") .style("opacity", function(d){ if (d3.select(this).text().includes("apr")){return "1"}else{return "0"} }) .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)" );
take @ d3.class
callback. inside callback, have access datum, index , this
respectively.
so if want ticks show if contains "apr" in data, can like:
g.select('.axis.axis--x') .selectall("text") .style("text-anchor", "end") .attr("display", function(d, i, this) { if (!d.contains("apr") { return "none"; } }) .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)" );
you can replace if other statements return "none"
data point want disappear.
Comments
Post a Comment