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

Fix line chart for d3 v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
a017ae1632
commit
b4e9f4a745
13 changed files with 101 additions and 67 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. 2
      htdocs/samples/chart_area.html
  2. 2
      htdocs/samples/simple.html
  3. 3
      package.json
  4. 6
      src/arc.js
  5. 31
      src/axis.js
  6. 2
      src/color.js
  7. 25
      src/core.js
  8. 24
      src/interaction.js
  9. 2
      src/scale.js
  10. 30
      src/shape.js
  11. 21
      src/shape.line.js
  12. 14
      src/subchart.js
  13. 6
      src/zoom.js

2
htdocs/samples/chart_area.html
Unescape View File

@ -14,7 +14,7 @@
<h3>+/- vaulues</h3>
<div id="chart5"></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>

2
htdocs/samples/simple.html
Unescape View File

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

3
package.json
Unescape View File

@ -16,6 +16,7 @@
"watch": "nodemon -e js,scss --watch src -x 'npm run build:js:rollup && npm run build:css:sass'",
"watch:js": "nodemon -e js --watch src --ignore src/scss -x 'npm run build:js:rollup'",
"watch:css": "nodemon -e scss --watch src -x 'npm run build:css:sass'",
"test:only": "karma start karma.conf.js",
"test": "npm run build && npm run lint && karma start karma.conf.js",
"dist": "npm run build",
"codecov": "codecov"
@ -38,7 +39,7 @@
"gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
"readmeFilename": "README.md",
"dependencies": {
"d3": "~3.5.0"
"d3": "~4.12.0"
},
"devDependencies": {
"babel-plugin-external-helpers": "^6.22.0",

6
src/arc.js
Unescape View File

@ -4,7 +4,7 @@ import { isFunction } from './util';
c3_chart_internal_fn.initPie = function () {
var $$ = this, d3 = $$.d3;
$$.pie = d3.layout.pie().value(function (d) {
$$.pie = d3.pie().value(function (d) {
return d.values.reduce(function (a, b) { return a + b.value; }, 0);
});
$$.pie.sort($$.getOrderFunction() || null);
@ -62,7 +62,7 @@ c3_chart_internal_fn.updateAngle = function (d) {
c3_chart_internal_fn.getSvgArc = function () {
var $$ = this,
arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius),
arc = $$.d3.arc().outerRadius($$.radius).innerRadius($$.innerRadius),
newArc = function (d, withoutUpdate) {
var updated;
if (withoutUpdate) { return arc(d); } // for interpolate
@ -76,7 +76,7 @@ c3_chart_internal_fn.getSvgArc = function () {
c3_chart_internal_fn.getSvgArcExpanded = function (rate) {
var $$ = this,
arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
arc = $$.d3.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
return function (d) {
var updated = $$.updateAngle(d);
return updated ? arc(updated) : "M 0 0";

31
src/axis.js
Unescape View File

@ -11,7 +11,7 @@ function AxisInternal(component, params) {
internal.params = params || {};
internal.d3 = component.d3;
internal.scale = internal.d3.scale.linear();
internal.scale = internal.d3.scaleLinear();
internal.range;
internal.orient = "bottom";
internal.innerTickSize = 6;
@ -103,7 +103,7 @@ c3_axis_internal_fn.updateTickTextCharSize = function (tick) {
return size;
};
c3_axis_internal_fn.transitionise = function (selection) {
return this.params.withoutTransition ? selection : this.d3.transition(selection);
return this.params.withoutTransition ? selection : selection.transition();
};
c3_axis_internal_fn.isVertical = function () {
return this.orient === 'left' || this.orient === 'right';
@ -198,14 +198,16 @@ c3_axis_internal_fn.generateAxis = function () {
var scale0 = this.__chart__ || internal.scale,
scale1 = this.__chart__ = internal.copyScale();
var ticks = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
tick = g.selectAll(".tick").data(ticks, scale1),
tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
var ticksValues = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1),
ticks = g.selectAll(".tick").data(ticksValues, scale1),
tickEnter = ticks.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
// MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
tickExit = tick.exit().remove(),
tickUpdate = internal.transitionise(tick).style("opacity", 1),
tickExit = ticks.exit().remove(),
tickUpdate = tickEnter.merge(ticks),
tickTransform, tickX, tickY;
internal.transitionise(tickUpdate).style('opacity', 1);
if (params.isCategory) {
internal.tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2);
tickX = internal.tickCentered ? 0 : internal.tickOffset;
@ -222,16 +224,17 @@ c3_axis_internal_fn.generateAxis = function () {
internal.updateTickTextCharSize(g.select('.tick'));
var lineUpdate = tickUpdate.select("line"),
textUpdate = tickUpdate.select("text"),
tspanUpdate = tick.select("text").selectAll('tspan')
.data(function (d, i) { return internal.tspanData(d, i, ticks, scale1); });
textUpdate = tickUpdate.select("text");
tspanUpdate.enter().append('tspan');
tspanUpdate.exit().remove();
tspanUpdate.text(function (d) { return d.splitted; });
var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) {
return internal.tspanData(d, i, ticks, scale1);
}),
tspanEnter = tspans.enter().append('tspan'),
tspanExit = tspans.exit().remove(),
tspanUpdate = tspanEnter.merge(tspans).text(function (d) { return d.splitted; });
var path = g.selectAll(".domain").data([ 0 ]),
pathUpdate = (path.enter().append("path").attr("class", "domain"), internal.transitionise(path));
pathUpdate = path.enter().append("path").merge(path).attr("class", "domain");
// TODO: each attr should be one function and change its behavior by internal.orient, probably
switch (internal.orient) {

2
src/color.js
Unescape View File

@ -4,7 +4,7 @@ import { notEmpty } from './util';
c3_chart_internal_fn.generateColor = function () {
var $$ = this, config = $$.config, d3 = $$.d3,
colors = config.data_colors,
pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.scale.category10().range(),
pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.schemeCategory10,
callback = config.data_color,
ids = [];

25
src/core.js
Unescape View File

@ -107,19 +107,18 @@ c3_chart_internal_fn.initParams = function () {
$$.color = $$.generateColor();
$$.levelColor = $$.generateLevelColor();
$$.dataTimeFormat = config.data_xLocaltime ? d3.time.format : d3.time.format.utc;
$$.axisTimeFormat = config.axis_x_localtime ? d3.time.format : d3.time.format.utc;
$$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
[".%L", function (d) { return d.getMilliseconds(); }],
[":%S", function (d) { return d.getSeconds(); }],
["%I:%M", function (d) { return d.getMinutes(); }],
["%I %p", function (d) { return d.getHours(); }],
["%-m/%-d", function (d) { return d.getDay() && d.getDate() !== 1; }],
["%-m/%-d", function (d) { return d.getDate() !== 1; }],
["%-m/%-d", function (d) { return d.getMonth(); }],
["%Y/%-m/%-d", function () { return true; }]
]);
$$.dataTimeFormat = config.data_xLocaltime ? d3.timeFormat : d3.utcFormat;
$$.axisTimeFormat = config.axis_x_localtime ? d3.timeFormat : d3.utcFormat;
$$.defaultAxisTimeFormat = function (date) {
if (date.getMilliseconds()) { return d3.timeFormat(".%L")(date); }
if (date.getSeconds()) { return d3.timeFormat(":%S")(date); }
if (date.getMinutes()) { return d3.timeFormat("%I:%M")(date); }
if (date.getHours()) { return d3.timeFormat("%I %p")(date); }
if (date.getDay() && date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
if (date.getDate() !== 1) { return d3.timeFormat("%-m/%-d")(date); }
if (date.getMonth()) { return d3.timeFormat("%-m/%-d")(date); }
return d3.timeFormat("%Y/%-m/%-d")(date);
};
$$.hiddenTargetIds = [];
$$.hiddenLegendIds = [];
$$.focusedTargetIds = [];

24
src/interaction.js
Unescape View File

@ -9,7 +9,7 @@ c3_chart_internal_fn.initEventRect = function () {
};
c3_chart_internal_fn.redrawEventRect = function () {
var $$ = this, config = $$.config,
eventRectUpdate, maxDataCountTarget,
eventRectEnter, eventRectUpdate, maxDataCountTarget,
isMultipleX = $$.isMultipleX();
// rects for mouseover
@ -21,29 +21,25 @@ c3_chart_internal_fn.redrawEventRect = function () {
// clear old rects
eventRects.selectAll('.' + CLASS.eventRect).remove();
// open as public variable
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
if (isMultipleX) {
eventRectUpdate = $$.eventRect.data([0]);
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data([0]);
// enter : only one rect will be added
$$.generateEventRectsForMultipleXs(eventRectUpdate.enter());
eventRectEnter = $$.generateEventRectsForMultipleXs($$.eventRect.enter());
// update
$$.updateEventRect(eventRectUpdate);
$$.updateEventRect(eventRectEnter.merge($$.eventRect));
// exit : not needed because always only one rect exists
}
else {
// Set data and update $$.eventRect
maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []);
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect);
eventRectUpdate = $$.eventRect.data(function (d) { return d; });
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data(function (d) { return d; });
// enter
$$.generateEventRectsForSingleX(eventRectUpdate.enter());
eventRectEnter = $$.generateEventRectsForSingleX($$.eventRect.enter());
// update
$$.updateEventRect(eventRectUpdate);
$$.updateEventRect(eventRectEnter.merge($$.eventRect));
// exit
eventRectUpdate.exit().remove();
$$.eventRect.exit().remove();
}
};
c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
@ -113,7 +109,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
};
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config;
eventRectEnter.append("rect")
return eventRectEnter.append("rect")
.attr("class", $$.classEvent.bind($$))
.style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null)
.on('mouseover', function (d) {
@ -238,7 +234,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
$$.unexpandBars();
}
eventRectEnter.append('rect')
return eventRectEnter.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', $$.width)

2
src/scale.js
Unescape View File

@ -1,7 +1,7 @@
import { c3_chart_internal_fn } from './core';
c3_chart_internal_fn.getScale = function (min, max, forTimeseries) {
return (forTimeseries ? this.d3.time.scale() : this.d3.scale.linear()).range([min, max]);
return (forTimeseries ? this.d3.time.scale() : this.d3.scaleLinear()).range([min, max]);
};
c3_chart_internal_fn.getX = function (min, max, domain, offset) {
var $$ = this,

30
src/shape.js
Unescape View File

@ -80,7 +80,31 @@ c3_chart_internal_fn.isWithinShape = function (that, d) {
c3_chart_internal_fn.getInterpolate = function (d) {
var $$ = this,
interpolation = $$.isInterpolationType($$.config.spline_interpolation_type) ? $$.config.spline_interpolation_type : 'cardinal';
return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear";
var $$ = this, d3 = $$.d3,
types = {
'linear': d3.curveLinear,
'linear-closed': d3.curveLinearClosed,
'basis': d3.curveBasis,
'basis-open': d3.curveBasisOpen,
'basis-closed': d3.curveBasisClosed,
'bundle': d3.curveBundle,
'cardinal': d3.curveCardinal,
'cardinal-open': d3.curveCardinalOpen,
'cardinal-closed': d3.curveCardinalClosed,
'monotone-x': d3.curveMonotoneX,
'monotone-y': d3.curveMonotoneY,
'step': d3.curveStep,
},
type;
if ($$.isSplineType(d)) {
type = types[$$.config.spline_interpolation_type] || types['cardinal'];
}
else if ($$.isStepType(d)) {
type = types[$$.config.line_step_type];
}
else {
type = types["linear"];
}
return type;
};

21
src/shape.line.js
Unescape View File

@ -47,9 +47,10 @@ c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this;
$$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$));
$$.mainLine.enter().append('path')
$$.mainLine = $$.mainLine.enter().append('path')
.attr('class', $$.classLine.bind($$))
.style("stroke", $$.color);
.style("stroke", $$.color)
.merge($$.mainLine);
$$.mainLine
.style("opacity", $$.initialOpacity.bind($$))
.style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
@ -68,7 +69,7 @@ c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
};
c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
var $$ = this, config = $$.config,
line = $$.d3.svg.line(),
line = $$.d3.line(),
getPoints = $$.generateGetLinePoints(lineIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
@ -86,7 +87,7 @@ c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
path = $$.lineWithRegions(values, x, y, config.data_regions[d.id]);
} else {
if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
path = line.interpolate($$.getInterpolate(d))(values);
path = line.curve($$.getInterpolate(d))(values);
}
} else {
if (values[0]) {
@ -224,10 +225,10 @@ c3_chart_internal_fn.updateArea = function (durationForExit) {
var $$ = this, d3 = $$.d3;
$$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$));
$$.mainArea.enter().append('path')
$$.mainArea = $$.mainArea.enter().append('path')
.attr("class", $$.classArea.bind($$))
.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; }).merge($$.mainArea);
$$.mainArea
.style("opacity", $$.orgAreaOpacity);
$$.mainArea.exit().transition().duration(durationForExit)
@ -243,7 +244,7 @@ c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
];
};
c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
var $$ = this, config = $$.config, area = $$.d3.svg.area(),
var $$ = this, config = $$.config, area = $$.d3.area(),
getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
@ -264,7 +265,7 @@ c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
x0 = 0, y0 = 0, path;
if ($$.isAreaType(d)) {
if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); }
path = area.interpolate($$.getInterpolate(d))(values);
path = area.curve($$.getInterpolate(d))(values);
} else {
if (values[0]) {
x0 = $$.x(values[0].x);
@ -308,10 +309,10 @@ c3_chart_internal_fn.updateCircle = function () {
var $$ = this;
$$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data($$.lineOrScatterData.bind($$));
$$.mainCircle.enter().append("circle")
$$.mainCircle = $$.mainCircle.enter().append("circle")
.attr("class", $$.classCircle.bind($$))
.attr("r", $$.pointR.bind($$))
.style("fill", $$.color);
.style("fill", $$.color).merge($$.mainCircle);
$$.mainCircle
.style("opacity", $$.initialOpacityForCircle.bind($$));
$$.mainCircle.exit().remove();

14
src/subchart.js
Unescape View File

@ -4,13 +4,23 @@ import { isFunction } from './util';
c3_chart_internal_fn.initBrush = function () {
var $$ = this, d3 = $$.d3;
$$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
$$.brush = d3.brush().on("brush", function () { $$.redrawForBrush(); });
$$.brush.update = function () {
if ($$.context) { $$.context.select('.' + CLASS.brush).call(this); }
return this;
};
// TODO: fix
$$.brush.scale = function (scale) {
return $$.config.axis_rotated ? this.y(scale) : this.x(scale);
if ($$.config.axis_rotated) {
d3.brushY().extent([[0, scale.range()[0]], [40, scale.range()[1]]]);
}
else {
d3.brushX().extent([[scale.range()[0], 0], [scale.range()[1], 40]]);
}
};
// TODO: fix
$$.brush.empty = function () {
return true;
};
};
c3_chart_internal_fn.initSubchart = function () {

6
src/zoom.js
Unescape View File

@ -5,8 +5,8 @@ import { diffDomain } from './util';
c3_chart_internal_fn.initZoom = function () {
var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
$$.zoom = d3.behavior.zoom()
.on("zoomstart", function () {
$$.zoom = d3.zoom()
.on("start", function () {
startEvent = d3.event.sourceEvent;
$$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
@ -14,7 +14,7 @@ c3_chart_internal_fn.initZoom = function () {
.on("zoom", function () {
$$.redrawForZoom.call($$);
})
.on('zoomend', function () {
.on('end', function () {
var event = d3.event.sourceEvent;
// if click, do nothing. otherwise, click interaction will be canceled.
if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) {

Write Preview
Loading…
Cancel
Save