Permalink
Browse files

fix: Optimized geometry shape's id generation strategy. Closed #318.

  • Loading branch information...
simaQ committed Sep 11, 2018
1 parent 95fa70e commit ea7adc9df8a3943f235e970e66c98f6580186dc7
Showing with 80 additions and 4 deletions.
  1. +4 −4 src/animation/detail.js
  2. +76 −0 test/bug/issue-318-spec.js
@@ -110,9 +110,9 @@ function diff(fromAttrs, toAttrs) {
}
// Add a unique id identifier to each shape
function _getShapeId(geom, dataObj) {
function _getShapeId(geom, dataObj, geomIdx) {
const type = geom.get('type');
let id = 'geom-' + type;
let id = 'geom' + geomIdx + '-' + type;
const xScale = geom.getXScale();
const yScale = geom.getYScale();
const xField = xScale.field || 'x';
@@ -148,15 +148,15 @@ function _getShapeId(geom, dataObj) {
function getShapes(geoms, chart, coord) {
const shapes = [];
Util.each(geoms, geom => {
Util.each(geoms, (geom, geomIdx) => {
const geomContainer = geom.get('container');
const geomShapes = geomContainer.get('children');
const type = geom.get('type');
const animateCfg = Util.isNil(geom.get('animateCfg')) ? _getAnimateCfgByShapeType(type, chart) : geom.get('animateCfg');
if (animateCfg !== false) {
Util.each(geomShapes, (shape, index) => {
if (shape.get('className') === type) {
shape._id = _getShapeId(geom, shape.get('origin')._origin);
shape._id = _getShapeId(geom, shape.get('origin')._origin, geomIdx);
shape.set('coord', coord);
shape.set('animateCfg', animateCfg);
shape.set('index', index);
@@ -0,0 +1,76 @@
const expect = require('chai').expect;
const F2 = require('../../src/core');
require('../../src/geom/interval');
require('../../src/geom/line');
const Animation = require('../../src/animation/detail');
const canvas = document.createElement('canvas');
canvas.width = 375;
canvas.height = 260;
canvas.id = 'issue318';
document.body.appendChild(canvas);
describe('Issue 318', () => {
it('Issue 318', done => {
const data = [
{ name: 'Jon', score: 282, avgScore: 94, value: 75 },
{ name: 'Aaron', score: 208, avgScore: 41.6, value: 32 }
];
const chart = new F2.Chart({
id: 'issue318',
pixelRatio: window.devicePixelRatio,
padding: [ 'auto', 'auto', 90, 'auto' ],
plugins: Animation
});
chart.source(data, {
score: {
tickInterval: 50,
alias: '个人分数'
},
avgScore: {
ticks: [ 0, 17, 33, 50, 67, 83, 100 ],
alias: '平均分数'
},
value: {
ticks: [ 0, 17, 33, 50, 67, 83, 100 ],
alias: '历史分数'
}
});
chart.axis(false);
chart.interval().position('name*score').color('#0cc');
chart.line().position('name*value').color('#ffc26a');
chart.line().position('name*avgScore').color('#ff7f8d');
chart.render();
const canvas = chart.get('canvas');
const caches = canvas.get('caches');
expect(caches).to.have.all.keys('geom0-interval-Aaron', 'geom0-interval-Jon', 'geom1-line-line', 'geom2-line-line');
setTimeout(() => {
const newData = [
{ name: 'Jon', score: 282, avgScore: 94, value: 60 },
{ name: 'Aaron', score: 208, avgScore: 41.6, value: 60 },
{ name: 'Warren', score: 186, avgScore: 46.5, value: 60 },
{ name: 'David', score: 184, avgScore: 30.67, value: 60 },
{ name: 'Joel', score: 177, avgScore: 44.25, value: 60 },
{ name: 'Kyle', score: 150, avgScore: 50, value: 60 },
{ name: 'Jordan', score: 148, avgScore: 24.67, value: 80 },
{ name: 'Jack', score: 138, avgScore: 34.5, value: 60 },
{ name: 'Kuldeep', score: 130, avgScore: 32.5, value: 60 },
{ name: 'Max', score: 128, avgScore: 32, value: 60 },
{ name: 'Angus', score: 127, avgScore: 62.5, value: 60 }
];
chart.changeData(newData);
const geoms = chart.get('geoms');
const interval = geoms[0];
const line1 = geoms[1];
const line2 = geoms[2];
expect(interval.get('shapes')[0].attr('fill')).to.equal('#0cc');
expect(line1.get('shapes')[0].attr('strokeStyle')).to.equal('#ffc26a');
expect(line2.get('shapes')[0].attr('strokeStyle')).to.equal('#ff7f8d');
done();
}, 450);
});
});

0 comments on commit ea7adc9

Please sign in to comment.