Now I am trying to build pie charts which can be placed anywhere on the canvas in D3.
However in D3, the pie chart is composed like "[g class="arc][path][/g]",
but neither of "g tag" or "path tag"'s location can be changed.
Is there any solution to change the location of the pie chart on the canvas.
Thank you so much in advance!
You can change the position of an svg object (like a group) element with translate.
For example:
<g transform="translate(20,20)"></g>
Check a live example here: http://jsbin.com/zajij/1/
In d3 you can add an attr to add this transform
.attr("transform", "translate(20,20)");
Hope this helps!
Related
As I mentioned above in composite chart tool tip is not visible after redraw the graph in d3.js. Grateful for any suggestions!
How can I overlay the legend on a column chart without?
Would I need to use absolute positioning? If so, could someone provide an example?
Please see the picture below.
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/
I managed this by placing the legend in another container, then setting an absolute property and overlaying the div.
var legendContainer = am4core.create("legenddiv", am4core.Container)
chart.legend.parent = legendContainer;
I want my legend to adjust itslef according to the amount of data that is coming in like highcharts . For example if I have only one legend I don't wanna legend to take the length as the div itself and I also have multiple pods .if there are a lot of legends I want it to have scrollbar instead now it's reducing the size of the chart itself.
Pls give your valuable inputs .
You can have the Legend rendered inside a defined Element referring to it using divId.
Then just make sure your legend element is setup to use scrollbars.
Please check the example here: https://codepen.io/team/amcharts/pen/dac1c66de18a50661c8195d4b792a30c
I have the following donut chart here in d3.js
Please see here: <https://jsfiddle.net/jz9z9hw1/>
I am unsure of how to add text right in the centre of the donut. I'd like it to say "Test System 1".
Also, how does one go about adding text within the arcs? So, it would display the actual numbers?
Just add a text element to your SVG, like this. I added this to your fiddle, and it added the text right in the middle:
var text = svg.append('text')
.text('Test System 1')
.attr('text-anchor', 'middle')
I want to use exactly this d3 donut chart.
This 3d chart
However, instead of showing percentage, I'd like to show the raw datas that I am providing.
Ideally, the percentage could be shown (as it is now) and I could show the raw datas for each donut part using an onmouseover tooltip!
Can't make it work.
Thanks a lot for any help!
Are you looking for this,I update the fiddle with tool tip,
Initially add a div to the body i.e.
var div = d3.select("body").append("div").attr("class", "tooltip");
then whenever user makes a mouseover or mousemove on the paths/arcs do the necessary.
have a look in http://jsfiddle.net/Q3dhh/25/