Polylines in D3 and Legend spacing

Polylines in D3 and Legend spacing - javascript

I am using the below example and wanted to have the legend outside the Pie chart and also have the Polyline for the Text and the count and Percentage for each slice.
With the current code I have Pie inside the pie and Text and Percentage are showing when I mouse over the slice.
Appreciate the help a lot.Thanks
Can some one please help as I am unable to move forward.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="normalize.css">
<style>
#chart {
height: 360px;
margin: 0 auto; /* NEW */
position: relative;
width: 360px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
left: 130px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 80px;
z-index: 10;
}
.legend {
font-size: 12px;
}
rect {
cursor: pointer; /* NEW */
stroke-width: 2;
}
rect.disabled { /* NEW */
fill: transparent !important; /* NEW */
}
/* NEW */
h1 { /* NEW */
font-size: 14px; /* NEW */
text-align: center; /* NEW */
}
/* NEW */
</style>
</head>
<body>
<div id="chart"></div>
<script src="Scripts/d3.v3.min.js"></script>
<script>
(function(d3) {
'use strict';
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.category20(); //builtin range of colors
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var tooltip = d3.select('#chart')
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
d3.csv('weekdays.csv', function(error, dataset) {
dataset.forEach(function(d) {
d.count = +d.count;
d.enabled = true; // NEW
});
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
}) // UPDATED (removed semicolon)
.each(function(d) { this._current = d; }); // NEW
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return (d.enabled) ? d.count : 0; // UPDATED
}));
var percent = Math.round(1000 * d.data.count / total) / 10;
tooltip.select('.label').html(d.data.label);
tooltip.select('.count').html(d.data.count);
tooltip.select('.percent').html(percent + '%');
tooltip.style('display', 'block');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
});
/* OPTIONAL
path.on('mousemove', function(d) {
tooltip.style('top', (d3.event.pageY + 10) + 'px')
.style('left', (d3.event.pageX + 10) + 'px');
});
*/
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color) // UPDATED (removed semicolon)
.on('click', function(label) { // NEW
var rect = d3.select(this); // NEW
var enabled = true; // NEW
var totalEnabled = d3.sum(dataset.map(function(d) { // NEW
return (d.enabled) ? 1 : 0; // NEW
})); // NEW
if (rect.attr('class') === 'disabled') { // NEW
rect.attr('class', ''); // NEW
} else { // NEW
if (totalEnabled < 2) return; // NEW
rect.attr('class', 'disabled'); // NEW
enabled = false; // NEW
} // NEW
pie.value(function(d) { // NEW
if (d.label === label) d.enabled = enabled; // NEW
return (d.enabled) ? d.count : 0; // NEW
}); // NEW
path = path.data(pie(dataset)); // NEW
path.transition() // NEW
.duration(750) // NEW
.attrTween('d', function(d) { // NEW
var interpolate = d3.interpolate(this._current, d); // NEW
this._current = interpolate(0); // NEW
return function(t) { // NEW
return arc(interpolate(t)); // NEW
}; // NEW
}); // NEW
}); // NEW
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
});
})(window.d3);
</script>
</body>
</html>

You can place the legends where ever you wish by making the legends in a group and placing it using the translate
First Make SVG:
var s = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height);
Now make a legend group:
var legend_group = s.append('g').attr('transform',
'translate(' + (width / 3) + ',' + (height / 1.4) + ')');
Use translate it to a place of your choice. I have moved it to (width/3, height/1.4)
Make a group in which the pie chart will be drawn.
var svg = s.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (radius) + ')');
Lets make a polyline for each slice:
This function will make as many polylines as the dataset length.
function makePolyLines() {
var polyline = svg.selectAll("polyline")
.data(pie(dataset), key);
polyline.enter()
.append("polyline");
//hide polyline for which value is 0, a case when legend is clicked.
svg.selectAll("polyline").style("display", function(d) {
if (d.value == 0) {
return "none";
} else {
return "block";
}
});
polyline.transition().duration(1000)
.attrTween("points", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline.exit()
.remove();
}
Similarly make text for labels.
function makeTexts() {
var text = svg.selectAll(".labels")
.data(pie(dataset), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.classed("labels", true)
.text(function(d) {
return d.data.label + " (" + d.data.count + ")";
});
//hide text for which value is 0, a case when legend is clicked.
svg.selectAll(".labels").style("display", function(d) {
if (d.value == 0) {
return "none";
} else {
return "block";
}
});
text.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
})
.styleTween("text-anchor", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start" : "end";
};
});
text.exit()
.remove();
}
finally call these two functions.
1) initially after the data is fetched.
2) whenever legend is clicked and the piechart is updated.
Working code here

First, you need to make the svg element wider. Currently it's var width = 360;, you can change it to var width = 700; for example.
After you gained some more space, determine the width of the legend, for the example let's use 300px. Declare a new variable: var legendWidth = 300;
Now, when the legend is being declared:
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = (-2 * legendRectSize);
var vert = i * height - offset;
return 'translate(' + (horz) + ',' + vert + ')';
});
When calculation to horizontal translation, we need to take the legendWidth into consideration:
var horz = (-2 * legendRectSize) - legendWidth;
Note: You will need to fix the left and top CSS properties for the .tooltip element.
Another note: If you want to take this solution to the next level, you can implement it in a dynamic way instead of having the "magic number" of var legendWidth = 300.

Related

d3 Pie Chart Overlapping Labels

I know there are other solutions to this problem, but honestly they are very hard to parse out and implement into my own code. If someone can point me in the right direction in the code snippets below, I would greatly appreciate it.
ISSUE: Overlapping lines in d3 drilldown pie chart:
GOAL: To show d3 drilldown pie chart without overlapping labels.
VisualizationScopeModel.prototype.renderDrilldownPieGraph = function (data) {
let width = 950,
height = 500,
margin = 75,
radius = Math.min(width - margin, height - margin) / 2,
pieChart = d3.layout.pie().sort(null).value(function (d) {
return d.hasOwnProperty('genres') ? d.genres.length : d.count;
}),
arc = d3.svg.arc().outerRadius(radius),
outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9),
polylineArc = d3.svg.arc()
.innerRadius(radius * 0.7)
.outerRadius(radius * 0.9);
// clear existing svg element
d3.select("svg").text("");
let svg = d3.select("#my_dataviz")
.append("svg"),
defs = svg.append("svg:defs"),
// Declare a main gradient with the dimensions for all gradient entries to refer
mainGrad = defs.append("svg:radialGradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", 0).attr("cy", 0).attr("r", radius).attr("fx", 0).attr("fy", 0)
.attr("id", "master"),
// The pie sectors container
arcGroup = svg.append("svg:g")
.attr("class", "arcGroup")
.attr("filter", "url(#shadow)")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"),
// The sector text labels
labels = svg.append("g")
.attr("class", "labels")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"),
// The text lines point a sector
lines = svg.append("g")
.attr("class", "lines")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
// Declare shadow filter
let shadow = defs.append("filter").attr("id", "shadow")
.attr("filterUnits", "userSpaceOnUse")
.attr("x", -1 * (width / 2)).attr("y", -1 * (height / 2))
.attr("width", width).attr("height", height);
shadow.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", "4")
.attr("result", "blur");
shadow.append("feOffset")
.attr("in", "blur")
.attr("dx", "4").attr("dy", "4")
.attr("result", "offsetBlur");
shadow.append("feBlend")
.attr("in", "SourceGraphic")
.attr("in2", "offsetBlur")
.attr("mode", "normal");
// "Fold" pie sectors by tweening its current start/end angles
// into 2*PI
function tweenOut(data) {
data.startAngle = data.endAngle = (2 * Math.PI);
var interpolation = d3.interpolate(this._current, data);
this._current = interpolation(0);
return function (t) {
return arc(interpolation(t));
};
}
// "Unfold" pie sectors by tweening its start/end angles
// from 0 into their final calculated values
function tweenIn(data) {
var interpolation = d3.interpolate({ startAngle: 0, endAngle: 0 }, data);
this._current = interpolation(0);
return function (t) {
return arc(interpolation(t));
};
}
// Helper function to extract color from data object
function getColor(data, index) {
return data.color;
}
// Helper function to extract a darker version of the color
function getDarkerColor(data, index) {
return d3.rgb(getColor(data, index)).darker();
}
function findChildenByName(name) {
for (i = 0; i < data.length; i++) {
if (data[i].name == name) {
return data[i].genres;
}
}
return data;
}
// Redraw the graph given a certain level of data
function updateGraph(name) {
var currData = data;
if (name != undefined) currData = findChildenByName(name);
// Create a gradient for each entry (each entry identified by its unique category)
var gradients = defs.selectAll(".gradient").data(currData, function (d) { return d.name; });
gradients.enter().append("svg:radialGradient")
.attr("id", function (d, i) { return "gradient" + d.name; })
.attr("class", "gradient")
.attr("xlink:href", "#master");
gradients.text("").append("svg:stop").attr("offset", "0%").attr("stop-color", getColor);
gradients.append("svg:stop").attr("offset", "90%").attr("stop-color", getColor);
gradients.append("svg:stop").attr("offset", "100%").attr("stop-color", getDarkerColor);
// Create a sector for each entry in the enter selection
var paths = arcGroup.selectAll("path")
.data(pieChart(currData), function (d) { return d.data.name; });
paths.enter().append("svg:path").attr("class", "sector");
// Each sector will refer to its gradient fill
paths.attr("fill", function (d, i) { return "url(#gradient" + d.data.name + ")"; })
.transition().duration(1000)
.attrTween("d", tweenIn).each("end", function () {
this._listenToEvents = true;
});
// Mouse interaction handling
paths.on("click", function (d) {
if (this._listenToEvents) {
// Reset inmediatelly
d3.select(this).attr("transform", "translate(0,0)")
// Change level on click if no transition has started
paths.each(function () {
this._listenToEvents = false;
});
if (d.data.genres) updateGraph(d.data.name);
else updateGraph()
}
}).on("mouseover", function (d) {
// Mouseover effect if no transition has started
if (this._listenToEvents) {
// Calculate angle bisector
var ang = d.startAngle + (d.endAngle - d.startAngle) / 2;
// Transformate to SVG space
ang = (ang - (Math.PI / 2)) * -1;
// Calculate a 10% radius displacement
var x = Math.cos(ang) * radius * 0.1;
var y = Math.sin(ang) * radius * -0.1;
d3.select(this).transition()
.duration(250).attr("transform", "translate(" + x + "," + y + ")");
}
}).on("mouseout", function (d) {
// Mouseout effect if no transition has started
if (this._listenToEvents) {
d3.select(this).transition()
.duration(150).attr("transform", "translate(0,0)");
}
});
// Collapse sectors for the exit selection
paths.exit().transition().duration(1000)
.attrTween("d", tweenOut).remove();
// Create sector texts
var texts = labels.text("").selectAll('text')
.data(pieChart(currData), function (d) { return d.data.org_name; });
texts.enter().append("text").attr("dy", ".75em")
.text(function (d) {
return `${d.data.org_name} (${d.data.hasOwnProperty('genres') ? d.data.genres.length : d.data.count})`;
});
function midAngle(d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
}
texts.transition().duration(1000)
.attrTween("transform", function (d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = (radius + margin / 2) * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
})
.styleTween("text-anchor", function (d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start" : "end";
};
});
texts.exit().transition().duration(1000)
.attrTween("d", tweenOut).remove();
// Create text lines point sectors
var polylines = lines.text("").selectAll("polyline")
.data(pieChart(currData), function (d) { return d.data.name; });
polylines.enter().append("polyline");
polylines.transition().duration(1000)
.attrTween("points", function (d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = (radius + margin / 2) * (midAngle(d2) < Math.PI ? 1 : -1);
return [polylineArc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polylines.exit().transition().duration(1000)
.attrTween("d", tweenOut).remove();
}
updateGraph();
}

d3 v4 donut chart has text and poylines that overlap with small values

I am trying to figure out how to arrange the labels so that they do not overlap. Here is a picture of the chart
As you can see, with really small values, the text labels overlap. I tried to iterate over each text element and modify it's position, but that doesn't seem to be working. You can see at the bottom of this function that I tried to get the position of each text element and then modify it. What am I doing wrong? I've been at it for hours.
_renderDonutChart() {
let self = this;
// console.log("Donut Chart is beginning render")
let textOffset = 14;
self.graph.data[0].forEach(function (d) {
d.value = +d.value;
})
console.log(self.graph.data[0])
let boxSize = (self.options.radius + self.options.padding) * 2;
let parent = d3.select(self.ui.parent);
//let color = d3.scaleOrdinal(['#dc8710', '#9e3400', '#f19b12']);
let color = d3.scaleOrdinal(d3.schemeCategory20c);
let svg = parent.append('svg')
.attr('width', boxSize * 2)
.attr('height', boxSize)
.attr('transform', 'translate(-111,0)')
.append('g')
.attr('transform', 'translate(' + boxSize + ',' + boxSize / 2 + ')');
svg.append('g')
.attr('class', 'slices')
svg.append("g")
.attr("class", "labelName")
svg.append("g")
.attr("class", "labelValue")
svg.append("g")
.attr("class", "lines")
svg.append("div")
.attr("class", "progress-circle__box progress-circle__box--victorytype")
let arc = d3.arc()
.innerRadius(self.options.radius - self.options.border)
.outerRadius(self.options.radius);
let outerArc = d3.arc()
.innerRadius((self.options.radius - self.options.border) * 1.2)
.outerRadius((self.options.radius) * 1.2);
let legendRectSize = self.options.radius * 0.05;
let legendSpacing = self.options.radius * 0.02;
let pie = d3.pie()
.value(function(d) { return d.value; })
.sort(null);
let slice = svg.select('.slices')
.selectAll('path.slice')
.data(pie(self.graph.data[0]))
.enter()
.append('path')
.attr("class", "slice")
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
})
.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || 0;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
})
function midAngle(d){
return d.startAngle + (d.endAngle - d.startAngle)/2;
}
let text = svg.select(".labelName").selectAll("text")
.data(pie(self.graph.data[0]))
.enter()
.append("text")
.attr('class', 'label')
.attr("dy", ".35em")
.attr('transform', function(d) {
// effectively computes the centre of the slice.
// see https://github.com/d3/d3-shape/blob/master/README.md#arc_centroid
var pos = outerArc.centroid(d);
// changes the point to be on left or right depending on where label is.
pos[0] = self.options.radius * 0.97 * (midAngle(d) < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
})
.style('text-anchor', function(d) {
// if slice centre is on the left, anchor text to start, otherwise anchor to end
return (midAngle(d)) < Math.PI ? 'start' : 'end';
})
.style("fill", "white")
.text(function(d) {
return (" " + d.data.label+": " +d.value+"");
})
.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = self.options.radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate("+ pos +")";
};
})
.styleTween("text-anchor", function(d){
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start":"end";
};
})
.text(function(d) {
return (d.data.label+": "+d.value+"%");
})
let polyline = svg.select(".lines").selectAll("polyline")
.data(pie(self.graph.data[0]))
.enter()
.append("polyline")
.attr('points', function(d) {
var pos = outerArc.centroid(d);
pos[0] = self.options.radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return [arc.centroid(d), outerArc.centroid(d), pos]
})
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", "1px");
let prev;
text.each(function(d, i) {
if(i > 0) {
let thisbb = this.getBoundingClientRect(),
prevbb = prev.getBoundingClientRect();
// move if they overlap
console.log(thisbb.left);
console.log(prevbb.right);
if(!(thisbb.right < prevbb.left ||
thisbb.left > prevbb.right ||
thisbb.bottom < prevbb.top ||
thisbb.top > prevbb.bottom)) {
var ctx = thisbb.left + (thisbb.right - thisbb.left)/2,
cty = thisbb.top + (thisbb.bottom - thisbb.top)/2,
cpx = prevbb.left + (prevbb.right - prevbb.left)/2,
cpy = prevbb.top + (prevbb.bottom - prevbb.top)/2,
off = Math.sqrt(Math.pow(ctx - cpx, 2) + Math.pow(cty - cpy, 2))/2;
d3.select(this).attr("transform",
"translate(" + Math.cos(((d.startAngle + d.endAngle - Math.PI) / 2)) *
(self.options.radius + textOffset + off) + "," +
Math.sin((d.startAngle + d.endAngle - Math.PI) / 2) *
(self.options.radius + textOffset + off) + ")");
}
}
prev = this;
});
// console.log("Donut Chart is ending render")
}

I had the same issue. The best solution for me was to increase the size of the Svg area (based on current window) and add some padding to the legends based on the radius of the donut.
ie:
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 legendRectSize = (radius * 0.08);
var legendSpacing = (radius * 0.05);
This worked for me until the item count became too high. I amended from labels around the edge to display in the center, on slice/arc hover events. (There is an animation on the data value, which is why they are slanted in this snapshot)
I thought this made the unreadable data labels less confusing.

I thing you had same problem with this, you need to add more margin to your pie chart segment, assume your pie return 3% value, and you draw a text with line, it will stack on another, you need to devine margin if that value < 3 draw text with y+margin
if(percent<3){
o[1]
pos[1] += i*15
}
//return [label.centroid(d),[o[0],0[1]] , pos];
return [label.centroid(d),[o[0],pos[1]] , pos];
})
try to append this code structure to your chart

d3js write labels on multiline

I'm working on graphics and I met some difficulties on charts. I want to draw a pie chart (or donut) and to display labels in two lines or more in order to get the more space for the graph.
Here is my code
var dataGroupPotential = [];
var pieGroup;
var svg;
processData("pieGPChart");
function processData(chartDivId) {
$("#pieGPLegend").text("Title : myTitle");
//Construction du tableau data
dataGroupPotential.push({
label: "long text 1 : 100 000 000",
value: 100000000
});
dataGroupPotential.push({
label: "long text 2 : 200 000 000",
value: 200000000
});
dataGroupPotential.push({
label: "long text 3 : 300 000 000",
value: 300000000
});
var width = $("#" + chartDivId).width();
var dividor = 2.75;
var height = width / dividor;
//Ajout des éléments svg pour tracer le graphique
svg = d3.select("#" + chartDivId).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(" + width / 2 + "," + height / 2 + ")");;
svg.append("g").attr("class", "slices");
svg.append("g").attr("class", "labels");
svg.append("g").attr("class", "lines");
$("#" + chartDivId).height(height);
drawMyPie(svg, dataGroupPotential, width, height);
window.addEventListener('resize', function(event) {
// do stuff here
var chartDivId = "pieGPChart";
var width = $("#" + chartDivId).width();
var dividor = 2.75;
var height = width / dividor;
$("#" + chartDivId).height(height);
drawMyPie(svg, dataGroupPotential, width, height);
});
}
function drawMyPie(svg, data, width, height) {
var radius = Math.min(width, height) / 2;
var pie = d3.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
//svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var key = function(d) {
return d.data.label;
};
var color = d3.scaleOrdinal(d3.schemeCategory20);
change(data);
function mergeWithFirstEqualZero(first, second) {
var secondSet = d3.set();
second.forEach(function(d) {
secondSet.add(d.label);
});
var onlyFirst = first
.filter(function(d) {
return !secondSet.has(d.label)
})
.map(function(d) {
return {
label: d.label,
value: 0
};
});
return d3.merge([second, onlyFirst])
.sort(function(a, b) {
return d3.ascending(a.label, b.label);
});
}
function change(data) {
var duration = 3000;
var data0 = svg.select(".slices").selectAll("path.slice")
.data().map(function(d) {
return d.data
});
if (data0.length == 0) data0 = data;
var was = mergeWithFirstEqualZero(data, data0);
var is = mergeWithFirstEqualZero(data0, data);
/* ------- SLICE ARCS -------*/
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(was), key);
slice.enter()
.insert("path")
.attr("class", "slice")
.style("fill", function(d) {
return color(d.data.label);
})
.each(function(d) {
this._current = d;
});
slice = svg.select(".slices").selectAll("path.slice")
.data(pie(is), key);
slice
.transition().duration(duration)
.attrTween("d", function(d) {
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
_this._current = interpolate(t);
return arc(_this._current);
};
});
slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice
.exit().transition().delay(duration).duration(0)
.remove();
/* ------- TEXT LABELS -------*/
var text = svg.select(".labels").selectAll("text")
.data(pie(was), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.style("opacity", 0)
.text(function(d) {
return d.data.label;
})
.each(function(d) {
this._current = d;
});
//var legend = text.enter();
//text.append("text")
// .attr("dy", "-10")
// .style("opacity", 0)
// .text(function (d) {
// return d.data.label;
// })
//.each(function (d) {
// this._current = d;
//});
//text.append("text")
// .attr("dy", "10")
// .style("opacity", 0)
// .text(function (d) {
// return d.data.label;
// })
//.each(function (d) {
// this._current = d;
//});
function midAngle(d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
}
text = svg.select(".labels").selectAll("text")
.data(pie(is), key);
text.transition().duration(duration)
.style("opacity", function(d) {
return d.data.value == 0 ? 0 : 1;
})
.attrTween("transform", function(d) {
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
var d2 = interpolate(t);
_this._current = d2;
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
})
.styleTween("text-anchor", function(d) {
var interpolate = d3.interpolate(this._current, d);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start" : "end";
};
});
text = svg.select(".labels").selectAll("text")
.data(pie(data), key);
text
.exit().transition().delay(duration)
.remove();
/* ------- SLICE TO TEXT POLYLINES -------*/
var polyline = svg.select(".lines").selectAll("polyline")
.data(pie(was), key);
polyline.enter()
.append("polyline")
.style("opacity", 0)
.each(function(d) {
this._current = d;
});
polyline = svg.select(".lines").selectAll("polyline")
.data(pie(is), key);
polyline.transition().duration(duration)
.style("opacity", function(d) {
return d.data.value == 0 ? 0 : .5;
})
.attrTween("points", function(d) {
this._current = this._current;
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
var d2 = interpolate(t);
_this._current = d2;
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline = svg.select(".lines").selectAll("polyline")
.data(pie(data), key);
polyline
.exit().transition().delay(duration)
.remove();
};
}
svg {
width: 100%;
height: 100%;
}
path.slice {
stroke-width: 2px;
}
polyline {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div style="text-align:center;" class="row">
<h4 id="pieGPLegend"></h4>
<div id="pieGPChart"></div>
</div>
</div>
</div>
For the label, I would like to have something like that
long text 1
100 000 000
I already try some stuff, but didn't work. Here is what I try but I'm still confusing with d3js
var legend = text.enter();
text.append("text")
.attr("dy", "-10")
.style("opacity", 0)
.text(function (d) {
return d.data.label;
})
.each(function (d) {
this._current = d;
});
text.append("text")
.attr("dy", "10")
.style("opacity", 0)
.text(function (d) {
return d.data.label;
})
.each(function (d) {
this._current = d;
});
any help, advice, comment is welcome ! thank you
Damien

If you want to always break your text after the colon, the easiest approach is using a <tspan>:
.append("tspan")
.attr("x", 0)
.attr("dy", "1.3em")
.text(function(d) {
return d.data.label.split(":")[1];
})
Here is your code with that change:
var dataGroupPotential = [];
var pieGroup;
var svg;
processData("pieGPChart");
function processData(chartDivId) {
$("#pieGPLegend").text("Title : myTitle");
//Construction du tableau data
dataGroupPotential.push({
label: "long text 1 : 100 000 000",
value: 100000000
});
dataGroupPotential.push({
label: "long text 2 : 200 000 000",
value: 200000000
});
dataGroupPotential.push({
label: "long text 3 : 300 000 000",
value: 300000000
});
var width = $("#" + chartDivId).width();
var dividor = 2.75;
var height = width / dividor;
//Ajout des éléments svg pour tracer le graphique
svg = d3.select("#" + chartDivId).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(" + width / 2 + "," + height / 2 + ")");;
svg.append("g").attr("class", "slices");
svg.append("g").attr("class", "labels");
svg.append("g").attr("class", "lines");
$("#" + chartDivId).height(height);
drawMyPie(svg, dataGroupPotential, width, height);
window.addEventListener('resize', function(event) {
// do stuff here
var chartDivId = "pieGPChart";
var width = $("#" + chartDivId).width();
var dividor = 2.75;
var height = width / dividor;
$("#" + chartDivId).height(height);
drawMyPie(svg, dataGroupPotential, width, height);
});
}
function drawMyPie(svg, data, width, height) {
var radius = Math.min(width, height) / 2;
var pie = d3.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
//svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var key = function(d) {
return d.data.label;
};
var color = d3.scaleOrdinal(d3.schemeCategory20);
change(data);
function mergeWithFirstEqualZero(first, second) {
var secondSet = d3.set();
second.forEach(function(d) {
secondSet.add(d.label);
});
var onlyFirst = first
.filter(function(d) {
return !secondSet.has(d.label)
})
.map(function(d) {
return {
label: d.label,
value: 0
};
});
return d3.merge([second, onlyFirst])
.sort(function(a, b) {
return d3.ascending(a.label, b.label);
});
}
function change(data) {
var duration = 3000;
var data0 = svg.select(".slices").selectAll("path.slice")
.data().map(function(d) {
return d.data
});
if (data0.length == 0) data0 = data;
var was = mergeWithFirstEqualZero(data, data0);
var is = mergeWithFirstEqualZero(data0, data);
/* ------- SLICE ARCS -------*/
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(was), key);
slice.enter()
.insert("path")
.attr("class", "slice")
.style("fill", function(d) {
return color(d.data.label);
})
.each(function(d) {
this._current = d;
});
slice = svg.select(".slices").selectAll("path.slice")
.data(pie(is), key);
slice
.transition().duration(duration)
.attrTween("d", function(d) {
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
_this._current = interpolate(t);
return arc(_this._current);
};
});
slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice
.exit().transition().delay(duration).duration(0)
.remove();
/* ------- TEXT LABELS -------*/
var text = svg.select(".labels").selectAll("text")
.data(pie(was), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.style("opacity", 0)
.text(function(d) {
return d.data.label.split(":")[0] + ":";
})
.each(function(d) {
this._current = d;
})
.append("tspan")
.attr("x", 0)
.attr("dy", "1.3em")
.text(function(d) {
return d.data.label.split(":")[1];
})
.each(function(d) {
this._current = d;
});
//var legend = text.enter();
//text.append("text")
// .attr("dy", "-10")
// .style("opacity", 0)
// .text(function (d) {
// return d.data.label;
// })
//.each(function (d) {
// this._current = d;
//});
//text.append("text")
// .attr("dy", "10")
// .style("opacity", 0)
// .text(function (d) {
// return d.data.label;
// })
//.each(function (d) {
// this._current = d;
//});
function midAngle(d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
}
text = svg.select(".labels").selectAll("text")
.data(pie(is), key);
text.transition().duration(duration)
.style("opacity", function(d) {
return d.data.value == 0 ? 0 : 1;
})
.attrTween("transform", function(d) {
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
var d2 = interpolate(t);
_this._current = d2;
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
};
})
.styleTween("text-anchor", function(d) {
var interpolate = d3.interpolate(this._current, d);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start" : "end";
};
});
text = svg.select(".labels").selectAll("text")
.data(pie(data), key);
text
.exit().transition().delay(duration)
.remove();
/* ------- SLICE TO TEXT POLYLINES -------*/
var polyline = svg.select(".lines").selectAll("polyline")
.data(pie(was), key);
polyline.enter()
.append("polyline")
.style("opacity", 0)
.each(function(d) {
this._current = d;
});
polyline = svg.select(".lines").selectAll("polyline")
.data(pie(is), key);
polyline.transition().duration(duration)
.style("opacity", function(d) {
return d.data.value == 0 ? 0 : .5;
})
.attrTween("points", function(d) {
this._current = this._current;
var interpolate = d3.interpolate(this._current, d);
var _this = this;
return function(t) {
var d2 = interpolate(t);
_this._current = d2;
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline = svg.select(".lines").selectAll("polyline")
.data(pie(data), key);
polyline
.exit().transition().delay(duration)
.remove();
};
}
svg {
width: 100%;
height: 100%;
}
path.slice {
stroke-width: 2px;
}
polyline {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div style="text-align:center;" class="row">
<h4 id="pieGPLegend"></h4>
<div id="pieGPChart"></div>
</div>
</div>
</div>

Tooltip not generating when hovering a pie chart

I am trying to build a pie chart using the d3. I learned the concept from the site click here but when i hover over a part of pie chart the tooltip is not showing
here's my css style code used
#chart {
height: 360px;
margin: 0 auto; /* NEW */
position: relative;
width: 360px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
left: 130px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 80px;
z-index: 4;
}
.legend {
font-size: 12px;
}
rect {
cursor: pointer; /* NEW */
stroke-width: 2;
}
rect.disabled { /* NEW */
fill: transparent !important; /* NEW */
}
and here's the code for the js part
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = 500,
radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
console.log(tooltip);
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label + " " + d.data.value);
});
path.on('mouseover', function(d) { // NEW
var total = d3.sum(dataset.map(function(d) { // NEW
return d.value; // NEW
}));
console.log("mouseover"); // NEW
var percent = Math.round(1000 * d.data.value / total) / 10; // NEW
tooltip.select('.label').html(d.data.label); // NEW
tooltip.select('.count').html(d.data.value); // NEW
tooltip.select('.percent').html(percent + '%'); // NEW
tooltip.style('display', 'block'); // NEW
});
path.on('mouseout', function() {
console.log("mouseout"); // NEW
tooltip.style('display', 'none'); // NEW
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};
it is a function which takes the dataset and the dom element to which the whole pie chart is going to append
and here's a sample dataset
var dataset = [
{ label: 'Abulia', value: 10 },
{ label: 'Betelgeuse', value: 20 },
{ label: 'Cantaloupe', value: 30 },
{ label: 'Dijkstra', value: 40 }
];
instead of display: none, display: block thing in css i have also tried to opacity: 1, opacity: 0 thing but still no result.
Thanks in advance

now it's generating here's a working code
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = $(window).height() - 120,
radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
dataset.forEach(function(item){
item.enabled = true;
});
/*var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
*/
var color = $rootScope.defaultColorScheme;
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label );
})
.each(function(d) { this._current = d; });
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return (d.enabled) ? d.value : 0;
}));
var percent = Math.round(1000 * d.data.value / total) / 10;
tooltip.select('.label').html(d.data.label.toUpperCase()).style('color','black');
tooltip.select('.count').html(d.data.value);
tooltip.select('.percent').html(percent + '%');
/* //console.log(percent);
//console.log(tooltip.select('.percent')); */
tooltip.style('display', 'block');
tooltip.style('opacity',2);
});
path.on('mousemove', function(d) {
tooltip.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX - 25) + 'px');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
tooltip.style('opacity',0);
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color)
.on('click', function(label) { // NEW
var rect = d3.select(this); // NEW
var enabled = true; // NEW
var totalEnabled = d3.sum(dataset.map(function(d) { // NEW
return (d.enabled) ? 1 : 0; // NEW
})); // NEW
if (rect.attr('class') === 'disabled') { // NEW
rect.attr('class', ''); // NEW
} else { // NEW
if (totalEnabled < 2) return; // NEW
rect.attr('class', 'disabled'); // NEW
enabled = false; // NEW
} // NEW
pie.value(function(d) { // NEW
if (d.label === label) d.enabled = enabled; // NEW
return (d.enabled) ? d.value : 0; // NEW
}); // NEW
path = path.data(pie(dataset)); // NEW
path.transition() // NEW
.duration(750) // NEW
.attrTween('d', function(d) { // NEW
var interpolate = d3.interpolate(this._current, d); // NEW
this._current = interpolate(0); // NEW
return function(t) { // NEW
return arc(interpolate(t)); // NEW
}; // NEW
}); // NEW
}); // NEW
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};

Failed to generating two pie charts on the same page in d3.js

Failed Example
Woking Example
I'm switching for this pie chart for the animation effect. I wrap the code in a function and use $.each() to loop over the elements to generate two charts on the same page, but unlike the working example, which is my original code for generating pie charts , I can't get it to work. Can anyone figure out what the problem is?
var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){
console.log(dataset);
var data = [];
var color = d3.scale.ordinal().range(colors);
r = 115,
labelr = r + 30,
pi = 2 * Math.PI,
svg = d3.select(el).append('svg').
attr('width', 350).
attr('height', 350),
group = svg.append('g').
attr('transform', 'translate(155, 170)')
,
arc = d3.svg.arc().
innerRadius(r - 50).
outerRadius(r)
,
pie = d3.layout.pie()
.value(function(d) { return d.result; }),
format = d3.format('.3r'),
arcs = group.selectAll('.arc').
data(pie(d3.values(dataset))).
enter().
append('g').
attr('class', 'arc')
;
arcs.append('path').
transition().
delay(function(d, i) { return i * 500; }).
duration(750).
attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle + 0, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
};
}).
style('fill', function(d, i) { return color(i); }).
style('stroke', '#fff').
style('stroke-width', '2px')
;
arcs.append('text').
attr('transform', function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' +
(y/h * labelr) + ")";
}).
attr('text-anchor', 'middle').
attr('font-size', '1em').
attr('fill', '#222').
text(function (d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
var percent = Math.round(1000 * d.value / total) / 10;
return percent + ' %';
});
var tooltip = d3.select(el).append('div').attr('class', 'tooltip');
arcs.on('mousemove', function(d) { console.log(d3.event);
tooltip.style("top", d3.event.y - r+ "px").style("left", d3.event.x + "px")
});
arcs.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
tooltip.style('display', 'block')
.style("opacity", 1)
.append('div')
.attr('class', 'label')
.append('div')
.attr('class', 'count')
tooltip.select('.label').html(d.data.item);
tooltip.select('.count').html(d.data.result);
});
arcs.on('mouseout', function() {
tooltip.style('display', 'none');
});
}
$('.j_chart').each(function(k,i){
var dataset = $(this).find('.j_data').text();
console.log(dataset);
pie(JSON.parse(dataset),'#j_'+k);
})
This is the working code:
var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){ console.log(dataset)
'use strict';
var width = 280;
var height = 280;
var radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal().range(colors);
var svg = d3.select(el)
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.result; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.item);
});
var tooltip = d3.select(el).append('div').attr('class', 'tooltip');
path.on('mousemove', function(d) { console.log(d3.event);
tooltip.style("top", d3.event.y - radius + "px").style("left", d3.event.x + "px")
});
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
var percent = Math.round(1000 * d.data.result / total) / 10;
tooltip
.style('display', 'block')
.style("opacity", 1)
.append('div')
.attr('class', 'label')
.append('div')
.attr('class', 'count')
.append('div')
.attr('class', 'percent');
tooltip.select('.label').html(d.data.item);
tooltip.select('.count').html(d.data.result);
tooltip.select('.percent').html(percent + '%');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
});
}

the problem is that you have a function called "pie" and inside that function, you do
pie = d3.layout.pie()
thus, overwriting the function definition and the final result is that it is called only for the first item. try renaming the function to something else, like pie_func. check this fiddle with the correction: http://jsfiddle.net/cesarpachon/a4r2q4pw/

Develop Reference

JavaScript is the programming language of the Web.

Polylines in D3 and Legend spacing - javascript

Related

d3 Pie Chart Overlapping Labels

d3 v4 donut chart has text and poylines that overlap with small values

d3js write labels on multiline

Tooltip not generating when hovering a pie chart

Failed to generating two pie charts on the same page in d3.js

Categories

Resources