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

Fix subchart for d3 v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
4a5bfd0771
commit
e9dbfbf5b9
7 changed files with 56 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      htdocs/samples/chart_bar.html
  2. 2
      htdocs/samples/chart_bar_stacked.html
  3. 2
      htdocs/samples/chart_pie.html
  4. 3
      htdocs/samples/subchart.html
  5. 2
      src/core.js
  6. 2
      src/domain.js
  7. 84
      src/subchart.js

2
htdocs/samples/chart_bar.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({

2
htdocs/samples/chart_bar_stacked.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

2
htdocs/samples/chart_pie.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({

3
htdocs/samples/subchart.html
Unescape View File

@ -7,7 +7,7 @@
<div id="chart2"></div> <div id="chart2"></div>
<div id="chart3"></div> <div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
@ -61,7 +61,6 @@
}, },
}); });
</script> </script>
</body> </body>
</html> </html>

2
src/core.js
Unescape View File

@ -836,7 +836,7 @@ c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
c3_chart_internal_fn.updateSvgSize = function () { c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this, var $$ = this,
brush = $$.svg.select(".c3-brush .background"); brush = $$.svg.select(".c3-brush .overlay");
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect') $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width) .attr('width', $$.width)

2
src/domain.js
Unescape View File

@ -214,7 +214,7 @@ c3_chart_internal_fn.updateXDomain = function (targets, withUpdateXDomain, withU
if ($$.brush) { $$.brush.scale($$.subX); } if ($$.brush) { $$.brush.scale($$.subX); }
} }
if (withUpdateXDomain) { if (withUpdateXDomain) {
$$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.extent()); $$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.selectionAsValue());
if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); } if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
} }

84
src/subchart.js
Unescape View File

@ -3,24 +3,40 @@ import { c3_chart_internal_fn } from './core';
import { isFunction } from './util'; import { isFunction } from './util';
c3_chart_internal_fn.initBrush = function () { c3_chart_internal_fn.initBrush = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3, currentScale;
$$.brush = d3.brush().on("brush", function () { $$.redrawForBrush(); }); // TODO: dynamically change brushY/brushX according to axis_rotated.
$$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
$$.redrawForBrush();
});
$$.brush.update = function () { $$.brush.update = function () {
if ($$.context) { $$.context.select('.' + CLASS.brush).call(this); } var brush;
if ($$.context) {
$$.context.select('.' + CLASS.brush).call(this);
}
return this; return this;
}; };
// TODO: fix
$$.brush.scale = function (scale) { $$.brush.scale = function (scale) {
currentScale = scale;
var range = scale.range(),
extent;
if ($$.config.axis_rotated) { if ($$.config.axis_rotated) {
d3.brushY().extent([[0, scale.range()[0]], [40, scale.range()[1]]]); extent = [[0, range[0]], [$$.width2, range[1]]];
} }
else { else {
d3.brushX().extent([[scale.range()[0], 0], [scale.range()[1], 40]]); extent = [[range[0], 0], [range[1], $$.height2]];
} }
$$.brush.extent(extent).update();
};
$$.brush.selection = function () {
return d3.brushSelection($$.context.select('.' + CLASS.brush).node());
};
$$.brush.selectionAsValue = function () {
var selection = $$.brush.selection() || [0,0];
return [currentScale.invert(selection[0]), currentScale.invert(selection[1])];
}; };
// TODO: fix
$$.brush.empty = function () { $$.brush.empty = function () {
return true; var selection = $$.brush.selection();
return !selection || selection[0] === selection[1];
}; };
}; };
c3_chart_internal_fn.initSubchart = function () { c3_chart_internal_fn.initSubchart = function () {
@ -59,7 +75,7 @@ c3_chart_internal_fn.initSubchart = function () {
}; };
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) { c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
var $$ = this, context = $$.context, config = $$.config, var $$ = this, context = $$.context, config = $$.config,
contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate, contextLineEnter, contextLine, contextBarEnter, contextBar,
classChartBar = $$.classChartBar.bind($$), classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$), classBars = $$.classBars.bind($$),
classChartLine = $$.classChartLine.bind($$), classChartLine = $$.classChartLine.bind($$),
@ -68,22 +84,22 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
if (config.subchart_show) { if (config.subchart_show) {
//-- Bar --// //-- Bar --//
contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) contextBar = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets) .data(targets);
.attr('class', classChartBar); contextBarEnter = contextBar.enter().append('g')
contextBarEnter = contextBarUpdate.enter().append('g') .style('opacity', 0);
.style('opacity', 0) contextBarEnter.merge(contextBar)
.attr('class', classChartBar); .attr('class', classChartBar);
// Bars for each data // Bars for each data
contextBarEnter.append('g') contextBarEnter.append('g')
.attr("class", classBars); .attr("class", classBars);
//-- Line --// //-- Line --//
contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) contextLine = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets) .data(targets);
.attr('class', classChartLine); contextLineEnter = contextLine.enter().append('g')
contextLineEnter = contextLineUpdate.enter().append('g') .style('opacity', 0);
.style('opacity', 0) contextLineEnter.merge(contextLine)
.attr('class', classChartLine); .attr('class', classChartLine);
// Lines for each data // Lines for each data
contextLineEnter.append("g") contextLineEnter.append("g")
@ -99,17 +115,17 @@ c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
}; };
c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) { c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) {
var $$ = this; var $$ = this;
$$.contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) var contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data($$.barData.bind($$)); .data($$.barData.bind($$));
$$.contextBar.enter().append('path') var contextBarEnter = contextBar.enter().append('path')
.attr("class", $$.classBar.bind($$)) .attr("class", $$.classBar.bind($$))
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", $$.color); .style("fill", $$.color);
$$.contextBar var contextBarExit = contextBar.exit().transition().duration(durationForExit)
.style("opacity", $$.initialOpacity.bind($$));
$$.contextBar.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
$$.contextBar = contextBarEnter.merge(contextBar)
.style("opacity", $$.initialOpacity.bind($$));
}; };
c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) { c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) {
(withTransition ? this.contextBar.transition(Math.random().toString()).duration(duration) : this.contextBar) (withTransition ? this.contextBar.transition(Math.random().toString()).duration(duration) : this.contextBar)
@ -118,16 +134,16 @@ c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransiti
}; };
c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) { c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) {
var $$ = this; var $$ = this;
$$.contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) var contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
$$.contextLine.enter().append('path') var contextLineEnter = contextLine.enter().append('path')
.attr('class', $$.classLine.bind($$)) .attr('class', $$.classLine.bind($$))
.style('stroke', $$.color); .style('stroke', $$.color);
$$.contextLine var contextLineExit = contextLine.exit().transition().duration(durationForExit)
.style("opacity", $$.initialOpacity.bind($$));
$$.contextLine.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
$$.contextLine = contextLineEnter.merge(contextLine)
.style("opacity", $$.initialOpacity.bind($$));
}; };
c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) { c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) {
(withTransition ? this.contextLine.transition(Math.random().toString()).duration(duration) : this.contextLine) (withTransition ? this.contextLine.transition(Math.random().toString()).duration(duration) : this.contextLine)
@ -136,17 +152,17 @@ c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransi
}; };
c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) { c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area) var contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$)); .data($$.lineData.bind($$));
$$.contextArea.enter().append('path') var contextAreaEnter = contextArea.enter().append('path')
.attr("class", $$.classArea.bind($$)) .attr("class", $$.classArea.bind($$))
.style("fill", $$.color) .style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }); .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
$$.contextArea var contextAreaExit = contextArea.exit().transition().duration(durationForExit)
.style("opacity", 0);
$$.contextArea.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
$$.contextArea = contextAreaEnter.merge(contextArea)
.style("opacity", 0);
}; };
c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) { c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) {
(withTransition ? this.contextArea.transition(Math.random().toString()).duration(duration) : this.contextArea) (withTransition ? this.contextArea.transition(Math.random().toString()).duration(duration) : this.contextArea)

Write Preview
Loading…
Cancel
Save