From 429b0d26d1c6570389536de3ecdff25bc5655a83 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Thu, 9 May 2013 17:01:11 +0900 Subject: [PATCH] Fix dom insertion when multi chart type --- c3.js | 47 +++++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/c3.js b/c3.js index 0513920..ff9b2f5 100644 --- a/c3.js +++ b/c3.js @@ -378,10 +378,12 @@ } return false; } - function isLineType (id) { + function isLineType (d) { + var id = (typeof d === 'string') ? d : d.id; return !(id in __data_types) || __data_types[id] === 'line'; } - function isBarType (id) { + function isBarType (d) { + var id = (typeof d === 'string') ? d : d.id; return __data_types[id] === 'bar'; } function category (i) { @@ -863,24 +865,24 @@ } // lines and cricles - mainPath = main.selectAll('.target').selectAll('path'); + mainPath = main.selectAll('.target').selectAll('.target-line').filter(isLineType); if (withTransition) mainPath = mainPath.transition(); - mainPath.attr("d", function (d) { return lineWithRegions(d.values, __data_regions[d.id]); }); - mainCircle = main.selectAll('.target').selectAll('circle'); + mainPath.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]); }); + mainCircle = main.selectAll('.target').selectAll('.target-circle').filter(isLineType); if (withTransition) mainCircle = mainCircle.transition(); mainCircle.attr("cx", function(d) { return x(d.x); }) .attr("cy", function(d) { return y(d.value); }); // bars barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum; - mainBar = main.selectAll('.target').selectAll('rect.target-bar'); + mainBar = main.selectAll('.target').selectAll('.target-bar').filter(isBarType); if (withTransition) mainBar = mainBar.transition(); mainBar.attr("width", barWidth) .attr("x", function(d){ return x(d.x) - barWidth * (targetsNum/2-d.i); }); // subchart if (__subchart_show) { - contextPath = context.selectAll('.target').selectAll('path'); + contextPath = context.selectAll('.target').selectAll('path').filter(isLineType); if (withTransition) contextPath = contextPath.transition(); contextPath.attr("d", function(d){ return line2(d.values); }); } @@ -918,9 +920,9 @@ // Lines for each data f.append("path") .attr("class", function(d){ return "target-line target-line-" + d.id; }) - .attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]); }) .style("stroke", function(d) { return color(d.id); }) - .style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; }); + .filter(isLineType) + .attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]); }); // Circles for each data point on lines f.append('g') @@ -929,8 +931,9 @@ .attr("class", function(d){ return "target-circles target-circles-" + d.id; }) .style("fill", function(d) { return color(d.id); }) .style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null; }) + .filter(isLineType) .selectAll("circle") - .data(function(d) { return d.values; }) + .data(function(d){ return d.values; }) .enter().append("circle") .attr("class", function(d,i){ return "target-circle target-circle-" + i; }) .attr("cx", function(d) { return x(d.x); }) @@ -944,14 +947,14 @@ togglePoint(!_selected, _this, d, i); } __point_onclick(d, _this); - }) - .style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; }); + }); // Rects for each data barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum; f.append('g') .attr("class", function(d){ return "target-bars target-bars-" + d.id; }) .style("fill", function(d){ return color(d.id); }) + .filter(isBarType) .selectAll("bar") .data(function(d){ return d.values; }) .enter().append("rect") @@ -959,17 +962,19 @@ .attr("x", function(d){ return x(d.x) - barWidth * (targetsNum/2-d.i); }) .attr("y", function(d){ return y(d.value); }) .attr("width", barWidth) - .attr("height", function(d){ return height-y(d.value); }) - .style("opacity", function(d){ return isBarType(d.id) ? 1 : 0; }); + .attr("height", function(d){ return height-y(d.value); }); + + //-- Main Update Section --// - // Update Section main.selectAll('.target-line') .data(targets) + .filter(isLineType) .transition() .attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]); }); main.selectAll('.target-circles') .data(targets) + .filter(isLineType) .selectAll('circle') .data(function(d) { return d.values; }) .transition() @@ -989,15 +994,16 @@ // Lines for each data c.append("path") .attr("class", function(d){ return "target-line target-line-" + d.id; }) - .attr("d", function (d) { return line2(d.values); }) .style("stroke", function(d) { return color(d.id); }) - .style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; }); + .filter(isLineType) + .attr("d", function (d) { return line2(d.values); }); // Rects for each data bar2Width = (xAxis2.tickOffset()*2*0.6) / targetsNum; c.append('g') .attr("class", function(d){ return "target-bars target-bars-" + d.id; }) .style("fill", function(d){ return color(d.id); }) + .filter(isBarType) .selectAll("bar") .data(function(d){ return d.values; }) .enter().append("rect") @@ -1005,12 +1011,13 @@ .attr("x", function(d){ return x2(d.x) - bar2Width * (targetsNum/2-d.i); }) .attr("y", function(d){ return y2(d.value); }) .attr("width", bar2Width) - .attr("height", function(d){ return height2-y2(d.value); }) - .style("opacity", function(d){ return isBarType(d.id) ? 1 : 0; }); + .attr("height", function(d){ return height2-y2(d.value); }); + + //-- Context Update Section --// - // Update Section context.selectAll('.target-line') .data(targets) + .filter(isLineType) .transition() .attr("d", function (d) { return line2(d.values); }); }