Can anyone tell me How to add padAngle to one edge of arc using d3.js ?
I have created donut chart using d3.js. And found that there is an option to add space between arcs using .padAngle(). I achieved it. As per my requirement I need to add padding only one side of arc.
Can anyone suggest me how can I achieve it ?
As per my requirement, I should add extra padding for every 3 arcs. So I am passing padding using paddingFunction(it's customized) on top of arc. But it's adding both sides.
Below is my code:
var data = [46.00, 67, 50.00, 10.00,30.00,40.00],
color = ['red', 'green', 'black', 'pink','blue','orange'],
grpStrk = [0.1, 0.1, 0.5, 0.1, 0.1, 0.5],
width = '272',
height = '272',
radius = height/2 - 11;
/* function to render donut chart as per values and colors */
function renderSavingsDonutChart(data, color, grpStrk) {
try {
d3
} catch (err) {
return false;
}
/* function to return padding for chart arc based on flag to differenciate groups */
var paddingFunction = function(d,i) {
return grpStrk[i];
};
var arc = d3.svg.arc().innerRadius(radius-20).outerRadius(radius);
var pie = d3.layout.pie().sort(null);
if(isMobile()){
width = 257;
height = 257;
var arc = d3.svg.arc().innerRadius(radius-25).outerRadius(radius);
var forVbWidth = width-4;
var forVbHeight = height-4;
var svg = d3.select("#results-donut-chart").append("svg").attr("width", width).attr("height", height).attr("viewBox","2 2 " + forVbWidth + " " + forVbHeight).attr("preserveAspectRatio","xMidYMid").append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
}else{
var svg = d3.select("#results-donut-chart").append("svg").attr("width", width).attr("height", height).attr("viewBox","9 9 " + (width-19) + " " + (height-19)).attr("preserveAspectRatio","xMidYMid").append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
}
svg.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.style(
{
"fill": function(d, i) {
return color[i];
}
})
//.attr("d", arc);
.attr("d", arc.padAngle(paddingFunction));
//On Resize
var aspect = width / height,
chart = $("#results-donut-chart svg");
$(window).on("resize load", function() {
var targetWidth = chart.parent().width();
chart.attr("width", targetWidth);
chart.attr("height", targetWidth / aspect);
});
}
/*Calling savings donut on page load*/
renderSavingsDonutChart(data, color, grpStrk);
Related
I have build Leaflet based map visualization with circles on it made in D3. Based on the data selections, the map gets updated with values. Now, I am trying to change the stroke of circles based on another set of data. I mean if in my dataset there are 100 rows. After filtering, I show 60 circles and in these 60 points I have selected 30 points and I want to add the stroke to these 30 points and keep the rest of 60 points on map. Is it possible to do so?
.style("stroke", ....)
Can we call another dataset at this position?
This is my code
function updateSubset(filterLoad = 0) {
function applyLatLngToLayer(d) {
var y = d.geometry.coordinates[1]
var x = d.geometry.coordinates[0]
return map.latLngToLayerPoint(new L.LatLng(y, x))
}
var arr = geoData.features;
var filterObjArray = Object.entries(seldata_category);
console.log(filterObjArray)
var filterQuantArray = Object.entries(seldata_quant);
console.log(filterQuantArray)
var result = arr.filter(o => filterObjArray.every(([k,v]) => v.includes(o.properties[k])) && filterQuantArray.every(([k,[l,h]]) => o.properties[k] >= l && o.properties[k] <= h));
console.log(result);
console.log(seldata_category);
// handling size of the circles
var size_name = sizedropDown[current.size];
var size_extent = sizeExtents[current.size];
//console.log(colorExtents)
var sizeScale = d3.scaleSqrt()
.domain(size_extent)
.range([5,15]);
// handlimg color of the circles
var color_name = colordropDown[current.color];
var color_extent = colorExtents[current.color];
// console.log(color_extent)
var ordinalScale = d3.scaleOrdinal()
.domain(color_extent)
.range(c10(color_extent.length));
console.log(seldata_category)
console.log(seldata_quant)
// creating points using paths
var points = g.selectAll("circle")
.data(result);
var pointsEnter = points.enter().append("circle")
.attr("class", "points");
//console.log(points)
points.merge(pointsEnter).attr("r", function(d) { return sizeScale(d.properties[size_name]);})
.style("fill-opacity", 0.4)
.style("fill", function(d){ return ordinalScale(d.properties[color_name]);})
.on("mouseover",function(d){
var details = [];
for(var prop in d.properties){
details.push("<label>"+prop + " : </label>" + d.properties[prop]);
}
d3.select("#info_box").selectAll("li").data(details).enter().append("li").html(function(d){return d;});
$('#info_box li').addClass('list-group-item');
})
.on("mouseout", function(d){d3.select("#info_box").selectAll("li").remove();});
// map.on("viewreset", update);
//update();
map.on("viewreset", update);
update();
function update() {
var bounds = path.bounds(geoData);
topLeft = [bounds[0][0] + 10 , bounds[0][1] - 10]
bottomRight = [bounds[1][0] + 10 , bounds[1][1] + 10];
svg.attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
var x = d3.selectAll('circle');
x.attr("transform",
function(d) {
return "translate(" +
applyLatLngToLayer(d).x + "," +
applyLatLngToLayer(d).y + ")";
});
}
points.exit().remove();
}
I am trying to achieve two things:
Make the existing pie chart in my application fill the available SVG
element it is rendered in.
Make the SVG element fill the size of the containing div it sits in
so it is responsive.
In my bar charts I achieve this by setting ScaleLinear and ScaleBand ranges on the X and Y scale but this doesn't seem to be an option within the pie charts (and then setting the SVG element to a height and width of 100%).
Code:
export default Component.extend({
tagName: 'svg',
attributeBindings: ['width, height'],
classNameBindings: ['baseClass'],
a: null,
baseClass: 'pie-chart',
color: null,
data: null,
labelArc: null,
height: 400,
radius: null,
svg: null,
width: 400,
donutwidth: 75,
setSvg() {
const {
height,
baseClass,
width,
} = this.getProperties(
'height',
'baseClass',
'width'
);
const svg = select(`.${baseClass}`)
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${width/2}, ${height/2})`);
this.set('svg', svg);
},
_setG(svg, p) {
return svg.selectAll('arc')
.data(p)
.enter()
.append('g')
.attr('class', 'arc');
},
_setPie(data) {
const p = pie().padAngle(0.02).value((d) => d.count)(data);
return p;
},
// Template
<svg width='100%' height='100%'></svg>
Any help is gratefully appreciated
I found i needed to set the initial margins to pad the SVG, then calculate max and min values for pie elements using the available svgWidth data
var margin = {top: 20, right: 100, bottom: 30, left: 40};
var svgWidth = window.innerWidth - (window.innerWidth/4);
var width = svgWidth,
height = (Math.min(width) / 2) + 100,
radius = Math.min(width, height) / 3;
var oRadius = radius, //var holding value for the outer radius of the arc
iRadius = Math.min(width, height) / 4, //var holding the value for the inner radius of the arc
cRadius = 8; //var holding the value for the corner radius of the arc
var piePad = 5;
///////////////////////////////////////////////////////////////
////// Graphing Function
///////////////////////////////////////////////////////////////
function graph(_selection) {
_selection.each(function(data) {
var pie = d3.pie()
.padAngle(.01)
.sort(null)
.value(function(d) {
// console.log(d.value.value)
return d.value.value;
});
///////////////////////////////////////////////////////////////
////// Scales
///////////////////////////////////////////////////////////////
var max = d3.max(data, function(d) { return d.value; });
var min = d3.min(data, function(d) { return d.value; });
var colorScale = setColorScale(max);
///////////////////////////////////////////////////////////////
////// Pie Vars
///////////////////////////////////////////////////////////////
var pie = d3.pie()
.padAngle(.01)
.value(function(d) {return d.value;})
// .value(function(d) { return d[1]; })
.sort(null);
var arc = d3.arc()
.padRadius(oRadius + piePad)
.outerRadius(oRadius - piePad)
// .innerRadius(radius - (radius/2.piePad));
.innerRadius(iRadius);
// .cornerRadius(cRadius);
var outerArc = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
// .cornerRadius(cRadius);
var arcOut = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(iRadius - piePad*4)
.outerRadius(oRadius - piePad);
// .cornerRadius(cRadius);
var arcOver = d3.arc()
.padRadius(oRadius + piePad)
.innerRadius(iRadius - piePad*2)
.outerRadius(oRadius - piePad*2);
///////////////////////////////////////////////////////////////
////// Build Initial SVG
///////////////////////////////////////////////////////////////
if (!svg){
svg = d3.select(this).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("class", "donut-group")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
}
///////////////////////////////////////////////////////////////
////// Add paths for pie
///////////////////////////////////////////////////////////////
var path = svg.selectAll("path").data(pie(data));
path.enter()
.append("path")
.attr("class",animatePathIn)
/// rest of path code
} // end graph
return graph;
}
I'm trying to make radial bar chart using d3js, but I'm having some trouble with the data model. I have a fiddle here showing what I want to achieve. At the moment the size of the bars are randomly created, but I want to be able to provide my own data (values between 1 and 6) into the chart, but I'm having trouble understanding the data model/structure of d3js, so help would be appreciated!
$(function(){
var $container = $('.chart-container'),
τ = 2 * Math.PI,
width = $container.width(),
height = $container.height(),
outerRadius = Math.min(width,height)/2.5,
innerRadius = 10,
fontSize = (Math.min(width,height)/4);
var dataset = {
weeks: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
};
var color = d3.scale.ordinal() .range(['rgb(247,251,255)','rgb(222,235,247)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(66,146,198)','rgb(33,113,181)','rgb(8,81,156)','rgb(8,48,107)']);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select('.chart-container').append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(10).outerRadius(20*getRandomInt (1, 6))(d); });
});
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Change your dataset variable and colours here, just pre-populate your required arrays and inject them into D3. i.e. d3.values(dataset)
var dataset = {
weeks: [5,10]
};
var color = d3.scale.ordinal().range(['#ccc','#c33']);
I'm trying to implement zooming on a d3 graphic with a bunch of data as circles. The data is made up of 1 large circle and many smaller circles plotted inside it. I want to click on the smaller circles and zoom to them. I'm using a variation of the zoom from the zoomable circle packing demo. I don't want to use the demo code directly but I've got it mostly working.
Initially all the circles are in their correct positions. However when I click on the smaller circles, they shift position right before the zoom. When I click on the white circle to zoom back, you can see they are now permanently shifted. And when it does zoom, the circles don't zoom into the center of the viewport, like they do in the demo.
I've noticed that when I comment out the transform line
node.attr("transform", function(d) { return "translate(" + (xscale(d.cx) - v[0]) * k + "," + (yscale(d.cy) - v[1]) * k + ")"; });
the circles now remain in their correct positions. Their sizes scale up as they should, but now they just merge into one another as they get bigger, because I'm no longer translating them. So the problem must be something in my transform attribute, but I can't figure out what it is. Or maybe it's something with my initial view? When I uncomment the zoomTo(view) the circles immediately move to the incorrect positions.
How do I get their positions to remain in the right positions? And how do I get the circles to zoom to the center of the viewpoint? I thought I followed the demo code pretty closely, but it's not quite working right. Any ideas?
I'd also like the axes to zoom as well but I haven't gotten that far into my problem yet.
Here's my jsfiddle.
And my full javascript code
function loadPlateDesign(){
var width = 400;
var height = 400;
var padding = 55;
var plateid = 7443;
var plateCen = {'ra': 230.99167, 'dec': 42.68736 };
var data = [{'name':7443,'color': 'white', 'cx': 0.0, 'cy': 0.0, 'r': 200},
{'color': 'red', 'cx': 8.23066, 'cy': -134.645, 'ra':231.1,'dec':42.1,'name': '1901', 'r': 10.0,
'children':[{'color': 'red', 'cx': 8.23066, 'cy': -134.645, 'ra':231.1,'dec':42.1,'name': 'a', 'r': 2.0}]},
{'color': 'blue', 'cx': -167.524, 'cy': -90.009, 'name': '711', 'r': 5.0}];
var xscale = d3.scale.linear().domain([330.,-330.]).range([0,400]);
var yscale = d3.scale.linear().domain([330.,-330.]).range([0,400]);
// initial focus and view
var focus = {'name':7443,'color': 'white', 'cx': 0.0, 'cy': 0.0, 'r': 200};
var view = [xscale(0.0),yscale(0.0),200*2];
// make the main svg element
var svg = d3.select('#platedesign').append('svg')
.attr('width',width+padding)
.attr('height',height+padding);
// add the plate and ifu data
var ifus=svg.selectAll('circle').data(data).enter().append('circle')
.attr('id',function(d){return d.name;})
.attr('cx',function(d,i){return xscale(d.cx);})
.attr('cy',function(d,i){return yscale(d.cy);})
.attr('r',function(d,i){return d.r;})
.style('fill',function(d,i){return d.color;})
.style('stroke','black')
.on('click',function(d){
if (focus != d) zoom(d), d3.event.stopPropagation();
});
// add the axes
var rascale = d3.scale.linear().domain([plateCen.ra+1.5,plateCen.ra-1.5]).range([0,400]);
var decscale = d3.scale.linear().domain([plateCen.dec+1.5,plateCen.dec-1.5]).range([0,400]);
xaxis = d3.svg.axis().scale(rascale).orient('bottom');
yaxis = d3.svg.axis().scale(decscale).orient('right').ticks(5);
svg.append('g').attr('class','x axis')
.attr('transform','translate(0,'+(height+5)+')')
.call(xaxis)
.append('text')
.attr('x',width/2)
.attr('y',35)
.style('text-anchor','middle')
.text('RA');
svg.append('g').attr('class','y axis')
.attr('transform','translate('+(width+5)+',0)')
.call(yaxis)
.append('text')
.attr('transform','rotate(90)')
.attr('x',height/2)
.attr('y',-35)
.style('text-anchor','middle')
.text('Dec');
var node = svg.selectAll("circle");
//zoomTo(view);
function zoom(d){
console.log('zooming to', d.name);
var focus0 = focus; focus=d;
var newview = [xscale(d.cx), yscale(d.cy), d.r*2+20];
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween('zoom', function(d){
var i = d3.interpolateZoom(view, newview);
return function(t) {zoomTo(i(t)); };
});
}
function zoomTo(v) {
var k = height / v[2]; view = v;
console.log(height, v);
node.attr("transform", function(d) { return "translate(" + (xscale(d.cx) - v[0]) * k + "," + (yscale(d.cy) - v[1]) * k + ")"; });
ifus.attr("r", function(d) { return d.r * k; });
}
}
Looks like you are mixing positioning methods. You set an initial cx and cy but then you zoom on a transform. Re-factoring a bit to get all the positioning done with transform fixes it up. I also found that you should initiate the view and do the zoom calculations on your d.cx and d.cy instead of on the xscale(d.cx).
function zoom(d){
console.log('zooming to', d.name);
var focus0 = focus; focus=d;
var newview = [d.cx, d.cy, d.r*2+20];
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween('zoom', function(d){
var i = d3.interpolateZoom(view, newview);
return function(t) {zoomTo(i(t)); };
});
}
function zoomTo(v) {
var k = height / v[2]; view = v;
console.log(height, v);
node.attr("transform", function(d) { return "translate(" + xscale((d.cx - v[0]) * k) + "," + yscale((d.cy - v[1]) * k) + ")"; });
ifus.attr("r", function(d) { return d.r * k; });
}
Updated fiddle.
I am looking for an example for to rotate a pie chart on mouse down event. On mouse down, I need to rotate the pie chart either clock wise or anti clock wise direction.
If there is any example how to do this in D3.js, that will help me a lot. I found an example using FusionChart and I want to achieve the same using D3.js
Pretty easy with d3:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.age);
});
var curAngle = 0;
var interval = null;
svg.on("mousedown", function(d) {
interval = setInterval(goRotate,10);
});
svg.on("mouseup", function(d){
clearInterval(interval);
})
function goRotate() {
curAngle += 1;
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(" + curAngle + "," + 0 + "," + 0 + ")");
}
Working example.
I did a similar thing with a compass instead of pie chart. You mainly need three methods - each bound to a different mouse event.
Bind this to the mousedown event on your compass circle:
function beginCompassRotate(el) {
var rect = compassCircle[0][0].getBBox(); //compassCircle would be your piechart d3 object
compassMoving = true;
compassCenter = {
x: (rect.width / 2),
y: (rect.height / 2)
}
}
Bind this to the mouse move on your canvas or whatever is holding your pie chart - you can bind it to the circle (your pie chart) but it makes the movement a little glitchy. Binding it to the circle's container keeps it smooth.
function rotateCompass() {
if (compassMoving) {
var mouse = d3.mouse(svg[0][0]);
var p2 = {
x: mouse[0],
y: mouse[1]
};
var newAngle = getAngle(compassCenter, p2) + 90;
//again this v is your pie chart instead of compass
compass.attr("transform", "translate(90,90) rotate(" + newAngle + "," + 0 + "," + 0 + ")");
}
}
Finally bind this to the mouseup on your canvas - again you can bind it to the circle but this way you can end the rotation without the mouse over the circle. If it is on the circle you will keep rotating the circle until you have a mouse up event over the circle.
function endCompassRotate(el) {
compassMoving = false;
}
Here is a jsfiddle showing it working: http://jsfiddle.net/4oy2ggdt/