score:11
Accepted answer
I'd do it after generating the axis:
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," +height + ")")
.call(_config.xAxisGen)
.selectAll('.x .tick text') // select all the x tick texts
.call(function(t){
t.each(function(d){ // for each one
var self = d3.select(this);
var s = self.text().split(' '); // get the text and split it
self.text(''); // clear it out
self.append("tspan") // insert two tspans
.attr("x", 0)
.attr("dy",".8em")
.text(s[0]);
self.append("tspan")
.attr("x", 0)
.attr("dy",".8em")
.text(s[1]);
})
});
Updated example.
Source: stackoverflow.com
Related Query
- D3 line chart axis text labels in multi line
- How to rotate the text labels for the x Axis of a nvd3.js line chart
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- d3.js How to draw line chart with vertical x axis labels
- D3 Line Chart not having proper X & Y axis plotting with Labels
- Show labels conditionally on multi series line chart
- d3 tooltip bar for multi line chart on mouseover on Y Axis (code supplied)
- D3 Multi Series Line chart with non time x axis
- X axis not displaying on Multi Series Line Chart using d3.js
- d3.js: Align text labels between ticks on the axis
- dc.js Series Chart multi line
- NVD3 Line Chart X Axis Ticks Are Missing
- Hide all text on y axis dc.js bar chart
- How do I always keep my d3 line chart rollover text always visible?
- d3 line chart labels overlap
- dimple.js How can I change the labels of a chart axis without changing the data?
- NVD3 line chart - legend text cut off
- NVD3 line chart display X axis
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- Multi Line Ordinal d3 chart
- How to create Stacked Line Chart D3, Multiple Y Axis and common X Axis
- Dual Y axis line chart in dc.js
- x axis labels overlapping for grouped category bar chart in d3
- Adding text labels in middle of each bar - stacked bar chart & Mouse Over Events
- C3js - combination chart with data labels only for line
- d3: tooltips on multi series line chart at each line when mouse hover event
- D3 multi line chart - strange animation
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- simple multi line chart with D3
More Query from same tag
- Setting the Location of Groups
- Cannot visualize percentage numbers (getting NaN)
- d3 opposing charts axis alignment issue
- cleaning axis in dynamic charts in dimple.js
- When using D3.js, is there a method to automatically get the closest `key` that has data?
- Issue with responsive d3 graph
- Uneven widths in a hierarchical partition
- Use D3 to Display SVG image within Angular Component
- d3js and Canvas: Setting Alpha lower than 0.01
- Filtering my data causes the y-axis to get screwed up
- TopoJSON Properties Preservation
- Ellipsis for long text
- Blur/Shadow for Shapes in react native with d3.js
- create three circles using D3
- Updating the D3 selection of objects
- Can I call function on each segment of a d3 pie chart?
- D3 not adding path to a group over a map
- links in d3.js forced directed graph
- Transition chord diagram when one chord has zero value
- d3 Plus bar chart how to force fixed max y axis range independent of the max data value
- What is Null doing when it is inserted into an attribute function in d3?
- Can we change the padding property of pack layout with a transition?
- How to plot longitude latitude coordinates for geoAlbersUsa() projection?
- multiline chart in d3 with long format data
- Align text node centrally(horizontally) inside group element
- D3.js multiple svg event not triggered
- How to add text to paths
- How to add popup on D3.js visualization (tree nodes)
- Cannot read property 'length' of undefined, but can still print length in console
- Bubble Charts with Line Chart