I want to implement wrapping long labels like http://bl.ocks.org/mbostock/7555321 in NVD3 Horizontal Multi-Bar Chart http://nvd3.org/examples/multiBarHorizontal.html
I tried to do it by adding some line break by <br /> or \n in label text like below:
var xTicks = d3.select('.nv-x.nv-axis > g > g').selectAll('g').selectAll('text');
xTicks.text(function(d,i){
return d+"<br />"+i; // trying to test by adding iteration but it does not work
})
but I did not achieve it so Please suggest, how can I implement it using NVD3 library.
Related
I am plotting a line chart using DC.js
I am providing label to my yAxis like
chart.yAxisLabel("Time");
Its working fine in this way.
But in my application I support localization so I am giving a String variable with the label. This is not working
var label = "Time";
chart.yAxisLabel(label);
I have a pie chart in angular-nvd3. https://krispo.github.io/angular-nvd3/#/pieChart The issue I have is with a pie chart, I have 5 slices, when all the pie slices are labeled, it looks very scrunched together. I want to instead modify the legend so that instead of just displaying the keys, I want to show:
<key> + <number of records in that key>
Using "labelType" I can change what is shown on the labels of the slices pie chart, but how can I change what is shown in the legend?
Could not find anything in the API to do this.
But here is a bit of hack to do it via d3:
After render
1) get all the text DOM
2) run a for loop on all the text.
3) get the text's data and change the inner HTML.
dispatch: {
renderEnd: function(e) {
//for each text
d3.selectAll(".nv-legend text")[0].forEach(function(d){
//get the data
var t= d3.select(d).data()[0];
//set the new data in the innerhtml
d3.select(d).html(t.key + " - " + t.y);
});
}
}
working code here
I have a working d3.js area chart How can I change it to become a line chart instead? I have been trying to include a line variable var line = d3.svg.line() without success.
You could just add the following css, to show the area as line:
.area{
fill:none;
stroke:#000;
}
Live example here:
http://jsfiddle.net/e9hmd/3/
Here's an example using d3.svg.line instead of d3.svg.area:
http://jsfiddle.net/e9hmd/4/
I am using NVD3 chart library to display charts in my application.I used to show many chart types say line,bar,pie,scatter,etc..
Till now ,i used to show only integer/float values at x-axis of line/bar chart chart..Its working well.(Sample data : (x-10, y-50),(x-20, y-100))
But the problem is,when am trying to display the line chart with some string value at x-axis,the nvd3 chart doesn't display anything..Dont know where am going wrong?
(sample data : (x-sun,y-50),(x-mon,y-75),(x-tue,y-100))
Need help.Thanks in advance
Try this, it works for me:
select all the svg element that corresponds to text. container is a variable referring a string for selection of text;
d3.selectAll(container + ' .nv-x .tick text').text(function(d){return d;})
I am using D3.js to draw an axis with ticks. I would like to hide only the last tick on the y-axis.
Maybe a picture will make it clearer. This is what my axis looks like at the moment - I'd like to hide the "21" and its associated tick.
Here is my current code:
var yAxisScale = d3.svg.axis().orient("left");
yAxisScale.scale(y_position);
yAxisScale.ticks(20).tickFormat(function(d) { return d+1; });
var yAxis = vis.selectAll("g.y.axis").data([1]);
Is there a way I can hide only the last tick, regardless of how many ticks there are on the y-axis?
I tried adding this line, but it doesn't work, even though the selectAll expression appears to return the right element.
d3.select(d3.selectAll("g.y.axis g")[0].pop()).style('opacity', 1e-6);
The opacity is still set to 1.
you should to take a look at axis.tickSize(). it allows you to set the size of the major, minor, and end ticks.
also see here for similar question:
Remove end-ticks from D3.js axis