chart = {
const svg = d3.select(DOM.svg(chartWidth, height));
let counter = 1;
svg.append("g").call(xAxis);
svg
.append("g")
.attr("class", "yAxis")
.call(yAxis)
.call(g =>
g
.selectAll(".tick text")
.attr("font-size", 12)
.attr("y", -3)
);
const group = svg
.append("g")
.selectAll("g")
.data(data.series)
.join("g")
.attr("transform", d => `translate(0,${y(d.name) + 1})`)
.on("click", function(d,i,nodes) {
console.log(d3.select(this).data()[0].name);
console.log(d3.selectAll('g.yAxis text').data()[0]);
let odd = counter % 2 === 1;
if (odd) {
d3.selectAll('path.partArea').attr('opacity', 0.2);
d3.selectAll('path.partLine').attr('opacity', 0.2);
d3.selectAll('g.yAxis text').attr('opacity', 0.2);
d3.selectAll('g.yAxis text').filter(d => d == d3.select(this).data()[0].name).attr('fill', 'green').attr('opacity',1);
d3.select(this).select('path.partArea').attr('fill', 'green');
d3.select(this).select('path.partArea').attr('opacity', 1);
d3.select(this)
.append("g")
.attr("class", "zAxis")
.call(zAxis);
}else{
d3.selectAll("g.zAxis").remove();
d3.selectAll('path.partArea').attr('opacity', fillOpacity);
d3.selectAll('path.partLine').attr('opacity', fillOpacity);
d3.selectAll('g.yAxis text').attr('opacity', 1).attr('fill', 'black');
d3.select(this).select('path.partArea').attr('fill', fillColor);
}
counter++;
});
group
.append("path")
.attr("class", "partArea")
.attr("fill", fillColor)
.attr("opacity", fillOpacity)
.attr("d", d => area(d.values));
group
.append("path")
.attr("class", "partLine")
.attr("fill", "none")
.attr("stroke", strokeColor)
.attr("d", 0)
.attr("d", d => line(d.values));
return svg.node();
}