quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ok

Browse Source
This commit is contained in:
Roman Galochkin 2020-02-19 12:24:38 +03:00
parent 3dce5045aa
commit 2556bafe72
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/charts/cdfChartD3.js
View File

@ -221,27 +221,27 @@ export class CdfChartD3 {
// Add svg. // Add svg.
const svg = container const svg = container
.patternify({ tag: 'svg', selector: 'svg-chart-container' }) .createObject({ tag: 'svg', selector: 'svg-chart-container' })
.attr('width', "100%") .attr('width', "100%")
.attr('height', attrs.svgHeight) .attr('height', attrs.svgHeight)
.attr('pointer-events', 'none'); .attr('pointer-events', 'none');
// Add container g element. // Add container g element.
this.chart = svg this.chart = svg
.patternify({ tag: 'g', selector: 'chart' }) .createObject({ tag: 'g', selector: 'chart' })
.attr( .attr(
'transform', 'transform',
'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')', 'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')',
); );
// Add axis. // Add axis.
this.chart.patternify({ tag: 'g', selector: 'axis' }) this.chart.createObject({ tag: 'g', selector: 'axis' })
.attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')') .attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')')
.call(this.xAxis); .call(this.xAxis);
// Draw area. // Draw area.
this.chart this.chart
.patternify({ .createObjectsByData({
tag: 'path', tag: 'path',
selector: 'area-path', selector: 'area-path',
data: this.dataPoints, data: this.dataPoints,
@ -253,7 +253,7 @@ export class CdfChartD3 {
// Draw line. // Draw line.
if (attrs.showDistributionLines) { if (attrs.showDistributionLines) {
this.chart this.chart
.patternify({ .createObjectsByData({
tag: 'path', tag: 'path',
selector: 'line-path', selector: 'line-path',
data: this.dataPoints, data: this.dataPoints,
@ -266,7 +266,7 @@ export class CdfChartD3 {
if (attrs.showVerticalLine) { if (attrs.showVerticalLine) {
this.chart this.chart
.patternify({ tag: 'line', selector: 'v-line' }) .createObject({ tag: 'line', selector: 'v-line' })
.attr('x1', this.xScale(attrs.verticalLine)) .attr('x1', this.xScale(attrs.verticalLine))
.attr('x2', this.xScale(attrs.verticalLine)) .attr('x2', this.xScale(attrs.verticalLine))
.attr('y1', 0) .attr('y1', 0)
@ -277,7 +277,7 @@ export class CdfChartD3 {
} }
this.hoverLine = this.chart this.hoverLine = this.chart
.patternify({ tag: 'line', selector: 'hover-line' }) .createObject({ tag: 'line', selector: 'hover-line' })
.attr('x1', 0) .attr('x1', 0)
.attr('x2', 0) .attr('x2', 0)
.attr('y1', 0) .attr('y1', 0)
@ -290,7 +290,7 @@ export class CdfChartD3 {
// Add drawing rectangle. // Add drawing rectangle.
const thi$ = this; const thi$ = this;
this.chart this.chart
.patternify({ tag: 'rect', selector: 'mouse-rect' }) .createObject({ tag: 'rect', selector: 'mouse-rect' })
.attr('width', calc.chartWidth) .attr('width', calc.chartWidth)
.attr('height', calc.chartHeight) .attr('height', calc.chartHeight)
.attr('fill', 'transparent') .attr('fill', 'transparent')
@ -369,26 +369,29 @@ export class CdfChartD3 {
} }
/** /**
* @todo: To rework it somehow. * @docs: https://github.com/d3/d3-selection
* @param params * @param params
* @returns {*} * @returns {*}
*/ */
d3.selection.prototype.patternify = function patternify(params) { d3.selection.prototype.createObject = function createObject(params) {
const selector = params.selector; const selector = params.selector;
const elementTag = params.tag; const elementTag = params.tag;
const data = params.data || [selector]; return this.insert(elementTag).attr('class', selector);
};
const selection = this.selectAll('.' + selector) /**
.data(data, (d, i) => { * @docs: https://github.com/d3/d3-selection
if (typeof d === 'object' && d.id) return d.id; * @param params
return i; * @returns {*}
}); */
d3.selection.prototype.createObjectsByData = function createObjectsByData(params) {
const selector = params.selector;
const elementTag = params.tag;
const data = params.data;
selection.exit().remove(); return this.selectAll('.' + selector)
.data(data)
return selection
.enter() .enter()
.append(elementTag) .insert(elementTag)
.merge(selection)
.attr('class', selector); .attr('class', selector);
}; };