After spending an entire day trying to figure this out, I am posting my question here.
I am using the Ionic framework for an app that I am working on. I have a nvd3 pie chart in a list. When I click on this pie chart, it should open up in a pop up and the size of the pie chart in the pop u should increase.
I have tried the following 2 ways of doing this.
1. Got the rendered SVG chart HTML of the pie chart in the list and appended it to a div in the pop up. This works! But I am not able to increase the size of this pie chart in the pop up.
2.There is an onclick event for d3 within which I should be able to resize and place this pie chart in a pop up.
Questions:
1. In case I am using method #1 above, how do I change the dimensions of the Pie chart using HTML and CSS
2. In case I am using method #2 above, could anyone please provide an example that demonstrates how I can resize a pie chart using the onclick event in nvd3/d3.
Edit 1: Here is my code for the same.
nv.addGraph(function() {
var width = 100,
height = 100;
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.y })
.color(['#4fc5f7','#fcb050','#ef4a5a','#494f5f','#11a9ac','#b7b8bc'])
.showLegend(false)
.showLabels(false)
.tooltips(false)
.margin({top: -1, right: -1, bottom: -1, left: -1})
.width(width)
.height(height)
.donut(true)
.donutRatio(0.25);
pieData[k] = eval('{' + pieData[k] + '}');
d3.select("#test_"+timeStamps[k])
.datum(pieData[k])
.transition().duration(300).ease('linear')
.attr('style','float:right;height:'+height+';width:'+width+';')
.call(chart);
k++;
return chart;
},function(){
d3.select("#test_"+timeStamps[k]).on('click', function(){
console.log("This works too...");
});
});
Now the place where I have the console, I need to change the radius of this pie chart that I have. The size of the pie chart should increase. I read about "arc" and "path" and "d", but have not been able to implement it.
A good example will help!
Regards
Shreerang
Spatial Unlimited