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

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

• javascript
• d3.js

• If with parenthesis: if (condition) – Gerardo Furtado Commented Aug 12, 2016 at 13:54
• Sorry just a mistake... I use coffee syntax and forgot to add the parenthesis on if statement, that is not my problem at all – Alberto Commented Aug 12, 2016 at 14:00
• What about doing if(data === 0) (its hard to help you without a fiddle) – Tim B Commented Aug 12, 2016 at 14:03
• 1 "But d3Data does not exists inside the anonymous function passes as second parameter to attr call." What error do you get? I don't see why d3Data should be accessible outside that function but not inside. – Dogbert Commented Aug 12, 2016 at 14:03
• Dogbert is right: what is d3Data.months? – Gerardo Furtado Commented Aug 12, 2016 at 14:06

1 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./ajax/libs/d3/3.4.11/d3.min.js"></script>