I'm working on a D3 version 4 donut graph to represent dynamic data with animation transitions. Some of the labels are large enough to be two lines and can be a very small percentage piece of the the overall graph. This results in overlapping labels.
During the transition / animation, how can I keep the labels from overlapping with one another?
* The demo/example I'm working from: http://bl.ocks.org/dbuezas/9572040
* The current working code based off of the example ^ above: Code Gist
In my research, I found solutions that would adjust the label's translate style after they have landed on their destination but the resulted in non-fluid transitions.
Related
I want to plot bars composed of a small but variable number of colored regions, with the same (three) colors appearing multiple times per bar. I'm aware of stacked bar charts in chart.js, but this uses the same number of colored regions (datasets) for each bar. Hacking it to plot a bunch of zero-length datasets to get the right number of colored regions in each bar feels wrong. That said, the tooltips, etc. in chart.js are nice, so if there's no more natural solution, maybe zero-length datasets are the way to go. Any thoughts?
So, instead of using chart.js, I think I'll use d3.js. Won't be hard to just plot the individual rectangles using d3.
For reference, an example that only has one bar per entry, but won't be hard to extend is the horizontal barplot shown here. (There's a simple intro to d3.js on the same site.)
Trying to visualize 3d graphs using D3.js. All nodes & arcs are fixed (eg X,Y,Z coordinates are known), no need for Dynamic Force-Directed positioning.
This example, from a commercial library, is great for nodes visualization:
https://www.highcharts.com/demo/3d-scatter-draggable
(rotation, different colors, more info shown on hover...).
How can one
do exactly the same in D3.js ?
add arcs? (having a list of arcs between nodes). Ideally, it would show the arc strength too, with a wider line when set to stronger.
Closest examples found:
https://bl.ocks.org/Niekes/d8007a5f71f45ab80a2977a8eb7ab3c9 - doesn't allow 3D rotation, no info on hover, no arcs
https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811 - no need for dynamic force, not 3D.
I am using the Google Visualization API to generate some pretty simple bar charts. The only slight complication is that the labels can be very long. The client is fine with them truncating but wants to give the chart a little more space.
Try as I might, I cannot find a way to increase the distance from the labels to the chart area! The irritating things is that if the labels are all short, the padding is fine; as soon as they get long, they all right align right up to the chart before truncating.
I've tried various chartArea.width / chartArea.left combinations, no joy; tried adding padding and margins to the vAxis.textStyle in the hope that the documentation is just incomplete; no joy.
I cannot believe that with all the other trillions of configuration options there is no way to increase label padding!
Fiddle:
http://jsfiddle.net/9v6os5x6/2/
EDIT: What it looks like it is doing is either calculating a decent padding for labels that fit and then not compensating for the ellipsis, or leaving a space that is exactly one ellipsis wide when drawing non-truncated labels, because if you set all labels to be short then just increase one, what it looks like it is doing is filling the gap of the truncated one with the ellipsis, then aligning all the others.
This is much easier to see by fiddling with the fiddle than it is to explain in words :)
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them