How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout? - javascript

I am using the Zoomable Pack Layout provided on the D3 website: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
All labels of the circles are displayed when the layout is displayed.
The problem is that for small circles which are close together, the labels overlap. I would like to know if there is a way to hide the overlapping text of the labels?
I have read about "foreignobject", but if this is the answer, I am not sure how and where to incorporate it in the code.

You could restrict the display of text based on either the level of the hierarchy, the radius of the circle or a combination of both. Both are in the pack output. Use titles for hover detail.

Related

Customize tooltip for multiple graphs in one plot

I am using React plotly.js
in our application. We are plotting multiple graphs (line, area, bar). I need a way to customise look and feel of tooltip which appears on hover of graph.
This the code sandbox for references of my code.
This is the output of the plot.
Currently the tooltips appear clumsy when we have multiple lines with multiple graphs which appear individually at each line.
Do we have a way to show only one tooltip with data of all lines at a hovered point.

D3 chart legend

Is it a bad practice to create a chart legend using html and not svg?
For example instead of
d3.select('g.chart-legend').append('text')
.text('ID');
with html
d3.select(div.chart-legend').append('span')
.text('ID');
No it's not. It depends upon the requirements. In general, if you are using svg based legends, it will be easier to draw shapes and place legends relative to your svg elements and if you go with html based legends, text reflow would be easier in case of dynamically obtained legends. Might be useful if you might end up with a lot of legends with long text and/or looking at responsive layouts.
Note that you would have to add your legends outside of your root svg element in case you want to add html based legends. So a part of your chart will outside of the svg. So if you're looking at any way of saving the svg or serializing it, you'll miss out on the legends.

D3 tooltip that is also a a D3 viz

I really appreciate your help on this - I'm fairly new to D3.
I am working on a sort of nested D3 viz. When one element in the first D3 viz is moused over, I want a second D3 viz (say bar chart distribution of the first's elements) to appear. Is this possible? Could you give me a high level overview of how to implement?
To further illustrate: Let's say first viz is scatter plot of GDP vs. population of various countries. When a particular country on the scatter plot is moused over, I want a bar chart to appear in the tooltip that shows the top 5 industries in that country.
Any help on how to approach this would be much appreciate. Thank you again!
I suggest you to take a look into Bootstrap's "popover". I like it because is very easy to use. Inside that popover you can insert SVG element and draw your second visualization.
To keep things clean and reusable, I suggest you to read this article and write your second chart in reusable manner.

tooltip issue in raphael js for area graph

I need to generate tool tip on area graph using Raphael.js. But tool tip has be shown on hover at particular x,y coordinates only( position is important since it is a multi area graph).
I am able to generate this area graph and tool-tip as well.
There are multiple lines on tool tip and each should have separate styling and not same styling.
I am unable to rotate the tooltip by 90 degree and there is a problem since the tool-tip keeps shifting downwards when text size changes.
So are there any way where can style each text on each line differently and keep the tool-tip at correct place?
This issue is resolved.
Since Grafico was really tough to customize I used Jquery FLOT library for my requirement .
I am able to do any required customization in FLOT and FLOT is very fast and easy to use with so much support available on the FLOT site.

Cheese diagram in d3.js

How would you implement this with d3.js:
I started with sunburst diagram, but how to handle pics around circle? How to rotate them? etc. (assume each cheese has its png pic)
To add images, you can use the SVG image tag. The elements added in this way can be translated and rotated in the usual manner. The code you're going to need is essentially the same as for a pie chart with rotated labels, for which you should be able to find plenty of examples.
Here's a quick and dirty modified pie chart example that demonstrates the technique.

Categories