The following script creates a point scale axis with three labels and a title. The body css selector defines the font-family and font-size of all text elements in the body. While the axis title is influenced by the css rules, the axis tick labels are not, although they are themselves text elements. I know I can set the tick label style using the .axis text selector. Maybe I am missing something obvious here, but what prevents the tick labels from being rendered with the body selector?
Here's the code:
<!doctype html>
<meta charset="utf-8">
<script src="d3.min.V4.js"></script>
<style>
body {
font-family: Courier;
font-size: 18px;
}
</style>
<body>
</body>
<script>
var margin = {top: 20, right: 60, bottom: 40, left: 70},
width = 600,
height = 100;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("class", "axis")
.call(d3.axisBottom(xScale)
);
//x axis title
svg.append('text')
.text('Colors')
.attr('x', width/2)
.attr('y', height - 5)
.style("text-anchor", "middle");
</script>
The following script creates a point scale axis with three labels and a title. The body css selector defines the font-family and font-size of all text elements in the body. While the axis title is influenced by the css rules, the axis tick labels are not, although they are themselves text elements. I know I can set the tick label style using the .axis text selector. Maybe I am missing something obvious here, but what prevents the tick labels from being rendered with the body selector?
Here's the code:
<!doctype html>
<meta charset="utf-8">
<script src="d3.min.V4.js"></script>
<style>
body {
font-family: Courier;
font-size: 18px;
}
</style>
<body>
</body>
<script>
var margin = {top: 20, right: 60, bottom: 40, left: 70},
width = 600,
height = 100;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("class", "axis")
.call(d3.axisBottom(xScale)
);
//x axis title
svg.append('text')
.text('Colors')
.attr('x', width/2)
.attr('y', height - 5)
.style("text-anchor", "middle");
</script>
2 Answers
Reset to default 3As Gerardo mentioned, the API will draw with fill #000 as default. A work around would be to re-select the text and re-style it. Which looks something like this:
var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);
// Add the x Axis
var xTicks = svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("class", "axis")
.call(d3.axisBottom(xScale)
);
xTicks.selectAll('text').attr('fill', function(d){
return d;
});
According to the API, the axis generator automatically sets the font-size and the font-family of the ticks in the container g element, this being the default style (code copied from the API's example):
//styles applied to the outer g element:
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
<g class="tick" opacity="1" transform="translate(0,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text>
</g>
//etc...
</g>
Thus, it seems that due to the specificity and precedence rules, this style prevails over your body CSS style.
To change the ticks, you'll have to specify text in your CSS (or using a class or an ID).