playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix dom insertion when multi chart type

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
a3dc7d2327
commit
429b0d26d1
1 changed files with 27 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      c3.js

47
c3.js
Unescape View File

@ -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); });
}

Write Preview
Loading…
Cancel
Save