D3：根据x轴值在y轴上添加刻度

Question

I am working on a graph, build with d3 lib.

The graph is so simple, Euros on y-axis and money on x-axis, that way I can show the evolution of a bank account over the time.

I want to add some style to the month labels, depending on the corresponding amount available on the account for that month, tho draw the x-axis I have something like this:

(d3Data contains all the data required to draw the graph)

d3Data.xScale = d3.scale.ordinal().domain(
  d3Data.dateStates.map(function(dateState) {
      return dateState.xValue
  })
);

xAxis = d3.svg.axis().scale(d3Data.xScale).orient("bottom")

d3Data.chart.append("g").call(xAxis)

That effectively creates the axis but now, i want to ad to each tick some classes for styling, like 'zero', 'max' or whatever.

My first approach was to select all ticks and do something like this:

d3Data.chart.selectAll(".xAxisItemClass")
  .attr('class', function(data, index) {
    if (d3Data.months[index].value === 0)
      return 'zero'
  });

But d3Data does not exists inside the anonymous function passed as second parameter to attr() call. I am kind of noob on d3 so probably I am missing something because such simple this should be easy

Why I have no access to D3data inside? How can I do this?

Thanks in advance :)

Answer 1

You can add a class to your ticks based on an array defined outside the anonymous function because that array is visible to the anonymous function: it was declared in an outer scope.

This is a basic example: I'm using an array called data and I'm setting the class of two ticks: one which the value is 0 (class "zero", January) and other which the value is 11 (class "eleven", March). Inspect the axis and you'll see. To make it easier to see, I set .zero to red and .eleven to green in the CSS.

 var width = 550, height = 200; var data = [{month: "Jan", value: 0}, {month: "Feb", value: 30}, {month: "Mar", value: 11}, {month: "Apr", value: 60}, {month: "May", value: 20}, {month: "Jun", value: 88} ]; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); var xScale = d3.scale.ordinal() .domain(data.map(function(d){ return d.month})) .rangeBands([0, width*0.95]) var xAxis = d3.svg.axis().scale(xScale) .orient("bottom"); svg.append("g") .attr("transform", "translate(10,100)") .attr("class", "x axis") .call(xAxis); var ticks = d3.selectAll(".tick text"); ticks.attr("class", function(d,i){ if(data[i].value == 11){ return "eleven"} else if(data[i].value == 0){ return "zero"} }); 

 .axis path, .axis line { fill: none; stroke: #4e5a64; shape-rendering: crispEdges; } .zero{ fill: red } .eleven{ fill:green } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>