D3 Color Doughnut Chart issue - d3.js

Question

I`m trying to make the rest of the chart transparent or set it to a specific color after I click on a specific slice of the doughnut. So far so good in console the filter is working if I hard-code the type it works( I set it to null at the beginning). I don't know why i can not get the slice that I click and make the rest of the chart set to that specific color. My though is that I have to update the chart somehow but with drawdata() function doesn't work ...
Here is my code:
var filter = {
device: null,
os_version: null,
app_version: null
};
// Creating the object Doughnut
var Doughnut = function(type) {
// Properties
var width = 160;
var height = 160
var radius = Math.min(width, height) / 2;
var donutWidth = 35;
var legendRectSize = 18;
var legendSpacing = 4;
var type = type;
// Array of Colors for the graph
var color = d3.scale.category20c();
var colorFunc = function(key) {
var normalColor = color(key);
if (filter[type] == null || key == filter[type]) {
console.log("normal color")
return normalColor;
}
console.log("trans color")
return "#d5eff2";
};
// Graph Elements
var chart = null;
var svg = null;
var path = null;
var legend = null;
// Our current dataSet
var dataSet = null;
// d3 functions
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) {
return d.value;
});
// This is the initialize method - we create the basic graph, no data
var initialize = function(chartElement){
chart = chartElement;
svg = d3.select(chart)
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
};
var update = function() {
d3.json("./api/distribution/", function(data){
dataSet = data;
data.value = +data.value;
drawData();
});
}
var drawData = function() {
path = svg.selectAll('path')
.data(pie(dataSet[type]))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d) {
return colorFunc(d.data.key);
})
.on('click', function(d) {
if (filter[type] == d.data.key) {
filter[type] = null;
} else {
filter[type] = d.data.key;
}
console.log(filter)
// $(chart).empty()
drawData();
});
createLegends();
};
var createLegends = function() {
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;
});
};
return{
init: initialize,
update: update
}
};
// Here we create instance of doughnuts
var doughnutGraphs = (function() {
var init = function() {
// Create four doughnuts
var doughnut1 = new Doughnut("device");
var doughnut2 = new Doughnut("os_version");
var doughnut3 = new Doughnut("app_version");
// Initialize with an element
doughnut1.init("#chart_1");
doughnut2.init("#chart_2");
doughnut3.init("#chart_3");
// Update each of them with data
doughnut1.update();
doughnut2.update();
doughnut3.update();
};
return {
init: init
}
})();

Answer 1

I found the answer :
Create a method to clean then call it in the drawdata()
var clean = function() {
svg.selectAll('path').remove();
and call it .on('click')
.on('click', function(d) {
if (filter[type] == d.data.key) {
filter[type] = null;
} else {
filter[type] = d.data.key;
}
console.log(filter)
// $(chart).empty()
clean();
drawData();
});