score:1
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).
score:2
as 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;
});
Source: stackoverflow.com
Related Query
- inline style stroke-width for axis makes bold tick labels
- Style of axis tick labels in d3.js
- Changing "fill" style on axis tick labels not working (d3.js)
- Create a D3 axis without tick labels
- Vary font size in tick labels of time axis
- How to make axis tick labels hyperlinks in D3.js
- How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart
- Add tooltip on D3s x axis tick labels
- Change the amount of tick labels on the x axis shown?
- d3.js: Align text labels between ticks on the axis
- D3.js: Using images (with filenames specified in data) as tick values on axis
- d3.js axis labels - color not changing
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Long tick labels getting cut off in plotly.js chart
- Hide Tick Labels in D3 on Line Graph
- Custom tick size on axis (d3js)
- D3 line chart axis text labels in multi line
- Multi-Level/Grouping of Axis Labels Using d3
- How to fit variable length tick labels on a D3 line chart?
- D3 Logarithmic Tick Labels as Powers of 10
- d3 autospace overlapping tick labels
- Adding a specific tick to a D3.js axis
- How to display the value for the final tick on axis in D3?
- Tick marks on both sides of axis on d3 scale
- D3 axis labels become too fine grained when zoomed in
- D3: change font size of axis labels
- d3 axis tick alignment
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- How do I generate axis tick for every year in D3?
- Axis tick labelling
More Query from same tag
- d3 - Can't return data from json request?
- How to wrap text to fit screen in d3?
- Transitioning a path more than once
- d3.js Radial gradient not apply to `path`
- Draw properly sized rectangle around text
- Custom layout in d3.js?
- Get width of text node in d3 inside .attrs method
- Selecting specific svg path based on JSON attribute in d3.js
- javascript d3 timeParse utcParse
- How to custom colour a network chart?
- How do I parse an ISO date string in d3.js v4?
- How can I draw a partial ellipse in D3?
- NVD3.js multichart with fixed x- and y-axis
- d3js v4 - Brush precision, how to get millis
- Server Side d3 - Encoding SVG as a Base64 Image
- D3 prevent distortion when zooming
- How can I print only the final count onto the console?
- d3.js Subtransition with exit() and enter()
- D3 JS with JSON
- Transition the numeric labels in a bar chart
- D3js zoom/drag not working any more in my code (+code sample)
- Show "now" line on event drops and add slight margin to the right
- d3js,when mouse drag the blank area,the force graph keeps jumping
- d3.js v4 move viewport to specific node
- D3 js bbox not forming in v7
- Proportional circles and labels in d3
- Re-project Web Mercator tiles to arbitrary projection with D3?
- D3.js: Get an array of the data attached to a selection?
- D3: Add border around clip-path
- Group array elements based on value and get median of other value