I am using the d3.svg.axis() function in order to draw the x axis of my barchart. As the labels on the axis can be very long, I need to cut them (to let's say four letters) and display the rest as tooltip. I would like to make use of svg:title, as the browser will take care of displaying the tooltip then.
Any idea how I can achieve this? How can I add a title element on each label on the x axis ticks?
Many Thanks!
Should be as simple as:
// tooltip
d3.selectAll('.x.axis>.tick') // gs for all ticks
.append('title') // append title with text
.text(function(d){
return d;
});
Example here.
Related
I am new to d3v4 and working on a chart where i need to show little rectangle on certain date matching to its title on yaxis. The problem i am facing is rectangles in the chart area not drawing equal to the yaxis point labels, i have tried changing the y value by hardcoding, it works fine but the point is the number of data object will change in real time like it could be any number of objects in an array. Here is the plunker
To draw the graph dynamically with limited data objects i've created few buttons on top of chart so that rectangles in the chart can draw equal to y-axis labels.
Any help is much appreciated.
You are using a band scale: that being the case, you should not change the y position, which should be just...
.attr('y', function(d) {
return yScale(d.title);
})
.. and you should not hardcode the height: use the bandwidth() instead:
.attr('height', yScale.bandwidth())
The issue now is setting the paddingInner and paddingOuter of the scale until you have the desired result. For instance:
var yScale = d3.scaleBand().domain(data.map(function(d) {
return d.title
}))
.range([height - 20, 0])
.paddingInner(0.75)
.paddingOuter(.2);
Here is the plunker with those changes: https://plnkr.co/edit/ZxGCeDGYwDGzUCYiSztQ?p=preview
However, if you still want (for whatever reason) hardcode the height or the width of the rectangles, use a point scale instead, and move the y position by half the height.
I am trying to create a line chart in d3.js.The color of the axes for this chart would be available only at runtime and can vary in a vast set of colors.It is possible to set the colors for the axes using css classes like this.
But since the range of colors that my chart can take is vast and only available at runtime, its not feasible to use this solution.Using call(yAxis).style("stroke",userColor) sets the color for the font use on axes labels and ticks but not the color of axis itself.
Is it possible to set the color of axis in d3.js axis dynamically using javascript?
I think the what you might want is something like the following:
d3.selectAll('.axis path')
.style("stroke", userColor)
.style("fill", userColor)
In this case, .axis path should be some identifying css on your axis lines (possibly put in with d3 as well in your yAxis function). You probably only need one of fill and stroke, try it out to see what works for you. This should operate on the actual axis line, rather than the text element
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.
I am developing a visualisation based on this interactive time-series composed of two plots. I would like to add a set of vertical lines in both plots indicating specific dates like
var labels = [
["Christmas 2011", 2011-12-25],
["Christmas 2012", 2012-12-25],
];
with a vertical axis, which doesn't move in the plot on the bottom and move accordingly with the zoom level in the top plot.
Should I focus.append.line? But then I should I provide the exact coordinates?
To add a line to your particular point:
var xval = x2(new Date('2008-12-25'));
focus.append("line")
.attr({
x1:xval,
x2:xval,
y1:0,
y2:height,
stroke:'black',
'stroke-width':1
});
This is using x2 and height from the code you linked to above.
To add a label:
focus.append("text")
.attr({
x:xval,
y:height/2,
'font-size':'1em',
fill:'red'
})
.text('Christmas 2008');
This doesn't work when you zoom in to a particular date range. I haven't figured out how to do that. I guess there must be a refresh event that I need to hook into or something.
I want to display custom text as y axis label.
I have attached the sample screenshot.
Have you tried something like this?
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
yAxis.render();