From 8d2602ee772512569e090ca4e234c1f4f05e6b0f Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 20 Feb 2020 13:15:48 +0300 Subject: [PATCH] Fixes variables scopes --- src/components/charts/cdfChartD3.js | 126 ++++++++++++---------------- 1 file changed, 53 insertions(+), 73 deletions(-) diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js index 473b281e..e2acf93a 100644 --- a/src/components/charts/cdfChartD3.js +++ b/src/components/charts/cdfChartD3.js @@ -28,6 +28,7 @@ export class CdfChartD3 { onHover: (e) => { }, }; + this.calc = { chartLeftMargin: null, chartTopMargin: null, @@ -39,12 +40,6 @@ export class CdfChartD3 { this.svg = null; this._container = null; - this.hoverLine = null; - this.xScale = null; - this.dataPoints = null; - - this.mouseover = this.mouseover.bind(this); - this.mouseout = this.mouseout.bind(this); this.formatDates = this.formatDates.bind(this); } @@ -168,31 +163,32 @@ export class CdfChartD3 { addDistributionChart() { const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors); - this.dataPoints = [this.getDataPoints('primary')]; + const dataPoints = [this.getDataPoints('primary')]; + + // Boundaries. + const xMin = this.attrs.minX || d3.min(this.attrs.data.primary.xs); + const xMax = this.attrs.maxX || d3.max(this.attrs.data.primary.xs); + const yMin = d3.min(this.attrs.data.primary.ys); + const yMax = d3.max(this.attrs.data.primary.ys); // Scales. - const xMin = d3.min(this.attrs.data.primary.xs); - const xMax = d3.max(this.attrs.data.primary.xs); - if (this.attrs.scale === 'linear') { this.xScale = d3.scaleLinear() - .domain([this.attrs.minX || xMin, this.attrs.maxX || xMax]) + .domain([xMin, xMax]) .range([0, this.calc.chartWidth]); } else { this.xScale = d3.scaleLog() .base(this.attrs.logBase) - .domain([this.attrs.minX, this.attrs.maxX]) + .domain([xMin, xMax]) .range([0, this.calc.chartWidth]); } - const yMin = d3.min(this.attrs.data.primary.ys); - const yMax = d3.max(this.attrs.data.primary.ys); - this.yScale = d3.scaleLinear() .domain([yMin, yMax]) .range([this.calc.chartHeight, 0]); // Axis generator. + let xAxis = null; if (!!this.attrs.timeScale) { const zero = _.get(this.attrs.timeScale, 'zero', moment()); const unit = _.get(this.attrs.timeScale, 'unit', 'years'); @@ -205,12 +201,12 @@ export class CdfChartD3 { .nice() .range([0, this.calc.chartWidth]); - this.xAxis = d3.axisBottom() + xAxis = d3.axisBottom() .scale(xScaleTime) .ticks(this.getTimeTicksByStr(unit)) .tickFormat(this.formatDates); } else { - this.xAxis = d3.axisBottom(this.xScale) + xAxis = d3.axisBottom(this.xScale) .ticks(3) .tickFormat(d => { if (Math.abs(d) < 1) { @@ -225,7 +221,7 @@ export class CdfChartD3 { }); } - this.yAxis = d3.axisRight(this.yScale); + const yAxis = d3.axisRight(this.yScale); // Objects. const line = d3.line() @@ -240,17 +236,17 @@ export class CdfChartD3 { // Add axis. this.chart.createObject({ tag: 'g', selector: 'x-axis' }) .attr('transform', 'translate(0,' + this.calc.chartHeight + ')') - .call(this.xAxis); + .call(xAxis); this.chart.createObject({ tag: 'g', selector: 'y-axis' }) - .call(this.yAxis); + .call(yAxis); // Draw area. this.chart .createObjectsWithData({ tag: 'path', selector: 'area-path', - data: this.dataPoints, + data: dataPoints, }) .attr('d', area) .attr('fill', (d, i) => areaColorRange(i)) @@ -262,7 +258,7 @@ export class CdfChartD3 { .createObjectsWithData({ tag: 'path', selector: 'line-path', - data: this.dataPoints, + data: dataPoints, }) .attr('d', line) .attr('id', (d, i) => 'line-' + (i + 1)) @@ -282,7 +278,7 @@ export class CdfChartD3 { .attr('stroke', 'steelblue'); } - this.hoverLine = this.chart + const hoverLine = this.chart .createObject({ tag: 'line', selector: 'hover-line' }) .attr('x1', 0) .attr('x2', 0) @@ -294,20 +290,40 @@ export class CdfChartD3 { .attr('stroke', '#22313F'); // Add drawing rectangle. - const thi$ = this; - this.chart - .createObject({ tag: 'rect', selector: 'mouse-rect' }) - .attr('width', this.calc.chartWidth) - .attr('height', this.calc.chartHeight) - .attr('fill', 'transparent') - .attr('pointer-events', 'all') - .on('mouseover', function () { - thi$.mouseover(this); - }) - .on('mousemove', function () { - thi$.mouseover(this); - }) - .on('mouseout', this.mouseout); + { + const context = this; + const range = [ + this.xScale(dataPoints[dataPoints.length - 1][0].x), + this.xScale( + dataPoints + [dataPoints.length - 1] + [dataPoints[dataPoints.length - 1].length - 1].x, + ), + ]; + + function mouseover() { + const mouse = d3.mouse(this); + hoverLine.attr('opacity', 1).attr('x1', mouse[0]).attr('x2', mouse[0]); + const xValue = mouse[0] > range[0] && mouse[0] < range[1] + ? context.xScale.invert(mouse[0]).toFixed(2) + : 0; + context.attrs.onHover(xValue); + } + + function mouseout() { + hoverLine.attr('opacity', 0) + } + + this.chart + .createObject({ tag: 'rect', selector: 'mouse-rect' }) + .attr('width', this.calc.chartWidth) + .attr('height', this.calc.chartHeight) + .attr('fill', 'transparent') + .attr('pointer-events', 'all') + .on('mouseover', mouseover) + .on('mousemove', mouseover) + .on('mouseout', mouseout); + } } addLollipopsChart() { @@ -361,34 +377,6 @@ export class CdfChartD3 { .attr("r", "4"); } - mouseover(constructor) { - const mouse = d3.mouse(constructor); - this.hoverLine.attr('opacity', 1) - .attr('x1', mouse[0]) - .attr('x2', mouse[0]); - - const xValue = this.xScale.invert(mouse[0]).toFixed(2); - - const range = [ - this.xScale(this.dataPoints[this.dataPoints.length - 1][0].x), - this.xScale( - this.dataPoints - [this.dataPoints.length - 1] - [this.dataPoints[this.dataPoints.length - 1].length - 1].x, - ), - ]; - - if (mouse[0] > range[0] && mouse[0] < range[1]) { - this.attrs.onHover(xValue); - } else { - this.attrs.onHover(0.0); - } - } - - mouseout() { - this.hoverLine.attr('opacity', 0) - } - formatDates(ts) { return moment(ts).format("MMMM Do YYYY"); } @@ -451,14 +439,6 @@ d3.selection.prototype.createObject = function createObject(params) { }; /** - * @example: - * This call example - * createObjectsByData({ - * tag: 'path', - * selector: 'line-path', - * data: this.dataPoints, - * }) - * will create a new tag "1,2,3". * @docs: https://github.com/d3/d3-selection * @param params * @returns {*}