Skip to content

Commit

Permalink
Simplify Line and Path data format
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladminsky
vladminsky committed Mar 10, 2016
1 parent d753d24 commit 9328819
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 48 deletions.
2 changes: 1 addition & 1 deletion src/elements/decorators/show-anchors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function elementDecoratorShowAnchors({container, guide, xScale, yScale})

var dots = container
.selectAll('circle')
.data(({data: frame}) => frame.data);
.data((fiber) => fiber);
dots.exit()
.remove();
dots.call(anchorUpdate);
Expand Down
2 changes: 1 addition & 1 deletion src/elements/decorators/show-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function elementDecoratorShowText({container, guide, xScale, yScale, text

var text = container
.selectAll('.caption')
.data(({data: frame}) => frame.data.filter((d) => d[textScale.dim]));
.data((fiber) => fiber.filter((d) => d[textScale.dim]));
text.exit()
.remove();
text.call(captionUpdate);
Expand Down
50 changes: 22 additions & 28 deletions src/elements/element.line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {elementDecoratorShowAnchors} from './decorators/show-anchors';
import {getLineClassesByWidth, getLineClassesByCount} from '../utils/css-class-map';
import {default as _} from 'underscore';
import {default as d3} from 'd3';
import {utils} from '../utils/utils';

export class Line extends Element {

Expand Down Expand Up @@ -164,7 +163,7 @@ export class Line extends Element {

var path = this
.selectAll('path')
.data(({data: frame}) => [frame.data]);
.data((fiber) => [fiber]);
path.exit()
.remove();
path.attr('d', d3Line)
Expand Down Expand Up @@ -205,31 +204,31 @@ export class Line extends Element {
var updatePoints = function () {

var attr = {
r: ({data:d}) => model.size(d),
cx: ({data:d}) => model.x(d),
cy: ({data:d}) => model.y(d),
class: ({data:d}) => (`${pointPref} ${model.color(d)}`)
r: (d) => model.size(d),
cx: (d) => model.x(d),
cy: (d) => model.y(d),
class: (d) => (`${pointPref} ${model.color(d)}`)
};

var dots = this
.selectAll('circle')
.data(frame => frame.data.data.map(item => ({data: item})));
.data((fiber) => fiber);
dots.exit()
.remove();
dots.attr(attr);
dots.enter()
.append('circle')
.attr(attr);

self.subscribe(dots, ({data:d}) => d);
self.subscribe(dots, (d) => d);
};

var updateGroups = (x, isLine) => {

return function () {

this.attr('class', ({data: f}) =>
`${linePref} ${model.color(f.data[0])} ${x} frame-${f.hash}`)
this.attr('class', (fiber) =>
`${linePref} ${model.color(fiber[0])} ${x}`)
.call(function () {
if (isLine) {

Expand All @@ -249,17 +248,12 @@ export class Line extends Element {
};

var groups = _.groupBy(fullData, model.group);
var fibers = Object.keys(groups).reduce(
(memo, k) => {
return memo.concat({
data: {
hash: utils.generateHash(k),
data: groups[k]
},
uid: options.uid
});
},
[]);
var fibers = Object
.keys(groups)
.reduce((memo, k) => {
memo.push(groups[k]);
return memo;
}, []);

var drawFrame = (tag, id, filter) => {

Expand All @@ -268,7 +262,7 @@ export class Line extends Element {
var frameGroups = options
.container
.selectAll(`.frame-${id}`)
.data(fibers.filter(filter), ({data: f}) => f.hash);
.data(fibers.filter(filter));
frameGroups
.exit()
.remove();
Expand All @@ -280,8 +274,8 @@ export class Line extends Element {
.call(updateGroups((`frame-${id}`), isDrawLine));
};

drawFrame('line', 'line-' + options.uid, ({data: f}) => f.data.length > 1);
drawFrame('anch', 'anch-' + options.uid, ({data: f}) => f.data.length < 2);
drawFrame('line', 'line-' + options.uid, (fiber) => fiber.length > 1);
drawFrame('anch', 'anch-' + options.uid, (fiber) => fiber.length < 2);
}

highlight(filter) {
Expand All @@ -291,15 +285,15 @@ export class Line extends Element {
container
.selectAll('.line')
.classed({
'graphical-report__highlighted': (({data: d}) => filter(d.data[0]) === true),
'graphical-report__dimmed': (({data: d}) => filter(d.data[0]) === false)
'graphical-report__highlighted': ((fiber) => filter(fiber[0]) === true),
'graphical-report__dimmed': ((fiber) => filter(fiber[0]) === false)
});

container
.selectAll('.dot-line')
.classed({
'graphical-report__highlighted': (({data: d}) => filter(d) === true),
'graphical-report__dimmed': (({data: d}) => filter(d) === false)
'graphical-report__highlighted': ((d) => filter(d) === true),
'graphical-report__dimmed': ((d) => filter(d) === false)
});
}

Expand Down
30 changes: 12 additions & 18 deletions src/elements/element.path.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {elementDecoratorShowText} from './decorators/show-text';
import {elementDecoratorShowAnchors} from './decorators/show-anchors';
import {getLineClassesByCount} from '../utils/css-class-map';
import {default as d3} from 'd3';
import {utils} from '../utils/utils';

export class Path extends Element {

Expand Down Expand Up @@ -158,7 +157,7 @@ export class Path extends Element {

var path = this
.selectAll('polygon')
.data(({data: frame}) => [self.packFrameData(frame.data)]);
.data((fiber) => [self.packFrameData(fiber)]);
path.exit()
.remove();
path.attr('points', polygonPointsMapper);
Expand Down Expand Up @@ -198,8 +197,8 @@ export class Path extends Element {

return function () {

this.attr('class', ({data: f}) =>
`${areaPref} ${model.color(f.data[0])} ${x} frame-${f.hash}`)
this.attr('class', (fiber) =>
`${areaPref} ${model.color(fiber[0])} ${x}`)
.call(function () {

if (guide.color.fill && !model.scaleColor.dim) {
Expand All @@ -215,23 +214,18 @@ export class Path extends Element {
};

var groups = _.groupBy(fullData, model.group);
var fibers = Object.keys(groups).reduce(
(memo, k) => {
return memo.concat({
data: {
hash: utils.generateHash(k),
data: groups[k]
},
uid: options.uid
});
},
[]);
var fibers = Object
.keys(groups)
.reduce((memo, k) => {
memo.push(groups[k]);
return memo;
}, []);

var drawFrame = (id) => {

var frameGroups = options.container
.selectAll(`.frame-${id}`)
.data(fibers, ({data: f}) => f.hash);
.data(fibers);
frameGroups
.exit()
.remove();
Expand All @@ -253,8 +247,8 @@ export class Path extends Element {
.container
.selectAll('.area')
.classed({
'graphical-report__highlighted': (({data: f}) => filter(f.data[0]) === true),
'graphical-report__dimmed': (({data: f}) => filter(f.data[0]) === false)
'graphical-report__highlighted': ((fiber) => filter(fiber[0]) === true),
'graphical-report__dimmed': ((fiber) => filter(fiber[0]) === false)
});
}

Expand Down

0 comments on commit 9328819

Please sign in to comment.