Adds an example

This commit is contained in:
Roman Galochkin 2020-02-19 12:53:43 +03:00
parent 2556bafe72
commit 41c273328c

View File

@ -241,7 +241,7 @@ export class CdfChartD3 {
// Draw area. // Draw area.
this.chart this.chart
.createObjectsByData({ .createObjectsWithData({
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
.createObjectsByData({ .createObjectsWithData({
tag: 'path', tag: 'path',
selector: 'line-path', selector: 'line-path',
data: this.dataPoints, data: this.dataPoints,
@ -375,23 +375,31 @@ export class CdfChartD3 {
*/ */
d3.selection.prototype.createObject = function createObject(params) { d3.selection.prototype.createObject = function createObject(params) {
const selector = params.selector; const selector = params.selector;
const elementTag = params.tag; const tag = params.tag;
return this.insert(elementTag).attr('class', selector); return this.insert(tag).attr('class', selector);
}; };
/** /**
* @example:
* This call example
* createObjectsByData({
* tag: 'path',
* selector: 'line-path',
* data: this.dataPoints,
* })
* will create a new tag "<path class="line-path">1,2,3</path>".
* @docs: https://github.com/d3/d3-selection * @docs: https://github.com/d3/d3-selection
* @param params * @param params
* @returns {*} * @returns {*}
*/ */
d3.selection.prototype.createObjectsByData = function createObjectsByData(params) { d3.selection.prototype.createObjectsWithData = function createObjectsWithData(params) {
const selector = params.selector; const selector = params.selector;
const elementTag = params.tag; const tag = params.tag;
const data = params.data; const data = params.data;
return this.selectAll('.' + selector) return this.selectAll('.' + selector)
.data(data) .data(data)
.enter() .enter()
.insert(elementTag) .insert(tag)
.attr('class', selector); .attr('class', selector);
}; };