@d3plus/core 3.0.16 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +88482 -2998
- package/es/index.js +1 -1
- package/es/src/charts/AreaPlot.js +1 -3
- package/es/src/charts/BarChart.js +1 -3
- package/es/src/charts/BoxWhisker.js +2 -4
- package/es/src/charts/BumpChart.js +4 -5
- package/es/src/charts/Donut.js +1 -3
- package/es/src/charts/Geomap.js +47 -88
- package/es/src/charts/LinePlot.js +1 -3
- package/es/src/charts/Matrix.js +27 -46
- package/es/src/charts/Network.js +87 -81
- package/es/src/charts/Pack.js +21 -34
- package/es/src/charts/Pie.js +12 -24
- package/es/src/charts/Plot.js +226 -321
- package/es/src/charts/Priestley.js +18 -36
- package/es/src/charts/Radar.js +100 -47
- package/es/src/charts/RadialMatrix.js +35 -47
- package/es/src/charts/Rings.js +99 -90
- package/es/src/charts/Sankey.js +85 -75
- package/es/src/charts/StackedArea.js +1 -3
- package/es/src/charts/Tree.js +27 -28
- package/es/src/charts/Treemap.js +117 -71
- package/es/src/charts/Viz.js +296 -492
- package/es/src/charts/drawSteps/drawAttribution.js +1 -1
- package/es/src/charts/drawSteps/drawBack.js +1 -2
- package/es/src/charts/drawSteps/drawColorScale.js +1 -2
- package/es/src/charts/drawSteps/drawLegend.js +8 -10
- package/es/src/charts/drawSteps/drawSubtitle.js +1 -3
- package/es/src/charts/drawSteps/drawTimeline.js +12 -9
- package/es/src/charts/drawSteps/drawTitle.js +1 -3
- package/es/src/charts/drawSteps/drawTotal.js +1 -3
- package/es/src/charts/drawSteps/zoomControls.js +19 -21
- package/es/src/charts/events/click.legend.js +2 -3
- package/es/src/charts/events/click.shape.js +2 -4
- package/es/src/charts/events/mouseenter.js +7 -8
- package/es/src/charts/events/mouseleave.js +1 -3
- package/es/src/charts/events/mousemove.legend.js +3 -4
- package/es/src/charts/events/mousemove.shape.js +2 -4
- package/es/src/charts/events/touchstart.body.js +1 -1
- package/es/src/charts/helpers/matrixData.js +11 -4
- package/es/src/charts/helpers/tileAttributions.js +2 -1
- package/es/src/charts/plotBuffers/Bar.js +55 -12
- package/es/src/charts/plotBuffers/Box.js +55 -12
- package/es/src/charts/plotBuffers/Circle.js +9 -11
- package/es/src/charts/plotBuffers/Line.js +4 -6
- package/es/src/charts/plotBuffers/Rect.js +10 -12
- package/es/src/charts/plotBuffers/discreteBuffer.js +4 -2
- package/es/src/charts/plotBuffers/numericBuffer.js +7 -6
- package/es/src/components/Axis.js +298 -426
- package/es/src/components/AxisBottom.js +1 -3
- package/es/src/components/AxisLeft.js +1 -3
- package/es/src/components/AxisRight.js +1 -3
- package/es/src/components/AxisTop.js +1 -3
- package/es/src/components/ColorScale.js +80 -197
- package/es/src/components/Legend.js +82 -135
- package/es/src/components/Message.js +27 -19
- package/es/src/components/TextBox.js +106 -262
- package/es/src/components/Timeline.js +88 -155
- package/es/src/components/Tooltip.js +301 -330
- package/es/src/shapes/Area.js +95 -74
- package/es/src/shapes/Bar.js +46 -86
- package/es/src/shapes/Box.js +104 -118
- package/es/src/shapes/Circle.js +29 -30
- package/es/src/shapes/Image.js +44 -102
- package/es/src/shapes/Line.js +74 -40
- package/es/src/shapes/Path.js +23 -25
- package/es/src/shapes/Rect.js +29 -41
- package/es/src/shapes/Shape.js +146 -363
- package/es/src/shapes/Whisker.js +89 -90
- package/es/src/utils/AccessorFn.js +4 -0
- package/es/src/utils/BaseClass.js +53 -82
- package/es/src/utils/D3plusConfig.js +1 -0
- package/es/src/utils/RESET.js +2 -4
- package/es/src/utils/accessor.js +4 -5
- package/es/src/utils/configPrep.js +13 -12
- package/es/src/utils/constant.js +2 -3
- package/es/src/utils/getProp.js +4 -4
- package/es/src/utils/index.js +0 -1
- package/package.json +29 -22
- package/types/index.d.ts +5 -0
- package/types/src/charts/AreaPlot.d.ts +16 -0
- package/types/src/charts/BarChart.d.ts +16 -0
- package/types/src/charts/BoxWhisker.d.ts +11 -0
- package/types/src/charts/BumpChart.d.ts +36 -0
- package/types/src/charts/Donut.d.ts +11 -0
- package/types/src/charts/Geomap.d.ts +120 -0
- package/types/src/charts/LinePlot.d.ts +15 -0
- package/types/src/charts/Matrix.d.ts +74 -0
- package/types/src/charts/Network.d.ts +78 -0
- package/types/src/charts/Pack.d.ts +47 -0
- package/types/src/charts/Pie.d.ts +44 -0
- package/types/src/charts/Plot.d.ts +199 -0
- package/types/src/charts/Priestley.d.ts +37 -0
- package/types/src/charts/Radar.d.ts +38 -0
- package/types/src/charts/RadialMatrix.d.ts +78 -0
- package/types/src/charts/Rings.d.ts +74 -0
- package/types/src/charts/Sankey.d.ts +81 -0
- package/types/src/charts/StackedArea.d.ts +14 -0
- package/types/src/charts/Tree.d.ts +33 -0
- package/types/src/charts/Treemap.d.ts +51 -0
- package/types/src/charts/Viz.d.ts +402 -0
- package/types/src/charts/drawSteps/drawAttribution.d.ts +7 -0
- package/types/src/charts/drawSteps/drawBack.d.ts +6 -0
- package/types/src/charts/drawSteps/drawColorScale.d.ts +6 -0
- package/types/src/charts/drawSteps/drawLegend.d.ts +12 -0
- package/types/src/charts/drawSteps/drawSubtitle.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTimeline.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTitle.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTotal.d.ts +7 -0
- package/types/src/charts/drawSteps/zoomControls.d.ts +7 -0
- package/types/src/charts/events/click.legend.d.ts +8 -0
- package/types/src/charts/events/click.shape.d.ts +8 -0
- package/types/src/charts/events/mouseenter.d.ts +8 -0
- package/types/src/charts/events/mouseleave.d.ts +8 -0
- package/types/src/charts/events/mousemove.legend.d.ts +9 -0
- package/types/src/charts/events/mousemove.shape.d.ts +9 -0
- package/types/src/charts/events/touchstart.body.d.ts +7 -0
- package/types/src/charts/helpers/matrixData.d.ts +11 -0
- package/types/src/charts/helpers/tileAttributions.d.ts +6 -0
- package/types/src/charts/index.d.ts +21 -0
- package/types/src/charts/plotBuffers/Bar.d.ts +16 -0
- package/types/src/charts/plotBuffers/Box.d.ts +16 -0
- package/types/src/charts/plotBuffers/Circle.d.ts +20 -0
- package/types/src/charts/plotBuffers/Line.d.ts +16 -0
- package/types/src/charts/plotBuffers/Rect.d.ts +19 -0
- package/types/src/charts/plotBuffers/discreteBuffer.d.ts +7 -0
- package/types/src/charts/plotBuffers/numericBuffer.d.ts +5 -0
- package/types/src/components/Axis.d.ts +309 -0
- package/types/src/components/AxisBottom.d.ts +11 -0
- package/types/src/components/AxisLeft.d.ts +11 -0
- package/types/src/components/AxisRight.d.ts +11 -0
- package/types/src/components/AxisTop.d.ts +11 -0
- package/types/src/components/ColorScale.d.ts +208 -0
- package/types/src/components/Legend.d.ts +157 -0
- package/types/src/components/Message.d.ts +40 -0
- package/types/src/components/TextBox.d.ts +278 -0
- package/types/src/components/Timeline.d.ts +157 -0
- package/types/src/components/Tooltip.d.ts +297 -0
- package/types/src/components/index.d.ts +11 -0
- package/types/src/shapes/Area.d.ts +81 -0
- package/types/src/shapes/Bar.d.ts +104 -0
- package/types/src/shapes/Box.d.ts +121 -0
- package/types/src/shapes/Circle.d.ts +44 -0
- package/types/src/shapes/Image.d.ts +124 -0
- package/types/src/shapes/Line.d.ts +48 -0
- package/types/src/shapes/Path.d.ts +38 -0
- package/types/src/shapes/Rect.d.ts +54 -0
- package/types/src/shapes/Shape.d.ts +378 -0
- package/types/src/shapes/Whisker.d.ts +96 -0
- package/types/src/shapes/index.d.ts +10 -0
- package/types/src/utils/AccessorFn.d.ts +6 -0
- package/types/src/utils/BaseClass.d.ts +76 -0
- package/types/src/utils/D3plusConfig.d.ts +164 -0
- package/types/src/utils/RESET.d.ts +3 -0
- package/types/src/utils/accessor.d.ts +13 -0
- package/types/src/utils/configPrep.d.ts +28 -0
- package/types/src/utils/constant.d.ts +11 -0
- package/types/src/utils/getProp.d.ts +9 -0
- package/types/src/utils/index.d.ts +8 -0
- package/umd/d3plus-core.full.js +20126 -18700
- package/umd/d3plus-core.full.js.map +1 -1
- package/umd/d3plus-core.full.min.js +2919 -5393
- package/umd/d3plus-core.js +1919 -4073
- package/umd/d3plus-core.js.map +1 -1
- package/umd/d3plus-core.min.js +1604 -3936
- package/es/src/utils/uuid.js +0 -13
|
@@ -71,7 +71,5 @@ var AxisBottom = /*#__PURE__*/ function(Axis) {
|
|
|
71
71
|
return AxisBottom;
|
|
72
72
|
}(Axis);
|
|
73
73
|
/**
|
|
74
|
-
|
|
75
|
-
@extends Axis
|
|
76
|
-
@desc Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
74
|
+
Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
77
75
|
*/ export { AxisBottom as default };
|
|
@@ -71,7 +71,5 @@ var AxisLeft = /*#__PURE__*/ function(Axis) {
|
|
|
71
71
|
return AxisLeft;
|
|
72
72
|
}(Axis);
|
|
73
73
|
/**
|
|
74
|
-
|
|
75
|
-
@extends Axis
|
|
76
|
-
@desc Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
74
|
+
Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
77
75
|
*/ export { AxisLeft as default };
|
|
@@ -71,7 +71,5 @@ var AxisRight = /*#__PURE__*/ function(Axis) {
|
|
|
71
71
|
return AxisRight;
|
|
72
72
|
}(Axis);
|
|
73
73
|
/**
|
|
74
|
-
|
|
75
|
-
@extends Axis
|
|
76
|
-
@desc Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
74
|
+
Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
77
75
|
*/ export { AxisRight as default };
|
|
@@ -71,7 +71,5 @@ var AxisTop = /*#__PURE__*/ function(Axis) {
|
|
|
71
71
|
return AxisTop;
|
|
72
72
|
}(Axis);
|
|
73
73
|
/**
|
|
74
|
-
|
|
75
|
-
@extends Axis
|
|
76
|
-
@desc Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
74
|
+
Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
77
75
|
*/ export { AxisTop as default };
|
|
@@ -60,6 +60,7 @@ function _inherits(subClass, superClass) {
|
|
|
60
60
|
if (superClass) _set_prototype_of(subClass, superClass);
|
|
61
61
|
}
|
|
62
62
|
function _instanceof(left, right) {
|
|
63
|
+
"@swc/helpers - instanceof";
|
|
63
64
|
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
|
|
64
65
|
return !!right[Symbol.hasInstance](left);
|
|
65
66
|
} else {
|
|
@@ -96,9 +97,9 @@ import { interpolateRgb } from "d3-interpolate";
|
|
|
96
97
|
import { scaleLinear, scaleThreshold } from "d3-scale";
|
|
97
98
|
import { select } from "d3-selection";
|
|
98
99
|
import { transition } from "d3-transition";
|
|
99
|
-
import { colorDefaults, colorLighter } from "@d3plus/color";
|
|
100
|
+
import { colorContrast, colorDefaults, colorLighter } from "@d3plus/color";
|
|
100
101
|
import { unique } from "@d3plus/data";
|
|
101
|
-
import { assign, elem, textWidth } from "@d3plus/dom";
|
|
102
|
+
import { assign, backgroundColor, elem, textWidth } from "@d3plus/dom";
|
|
102
103
|
import { formatAbbreviate } from "@d3plus/format";
|
|
103
104
|
import { ckmeans } from "@d3plus/math";
|
|
104
105
|
import { Axis, TextBox } from "../components/index.js";
|
|
@@ -111,7 +112,8 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
111
112
|
function ColorScale() {
|
|
112
113
|
_class_call_check(this, ColorScale);
|
|
113
114
|
var _this;
|
|
114
|
-
_this = _call_super(this, ColorScale)
|
|
115
|
+
_this = _call_super(this, ColorScale), _define_property(_this, "_select", void 0), _define_property(_this, "_axisClass", void 0), _define_property(_this, "_axisConfig", void 0), _define_property(_this, "_axisTest", void 0), _define_property(_this, "_align", void 0), _define_property(_this, "_buckets", void 0), _define_property(_this, "_bucketAxis", void 0), _define_property(_this, "_bucketFormat", void 0), _define_property(_this, "_bucketJoiner", void 0), _define_property(_this, "_centered", void 0), _define_property(_this, "_color", void 0), _define_property(_this, "_colorMax", void 0), _define_property(_this, "_colorMid", void 0), _define_property(_this, "_colorMin", void 0), // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
116
|
+
_define_property(_this, "_colorScale", void 0), _define_property(_this, "_data", void 0), _define_property(_this, "_domain", void 0), _define_property(_this, "_duration", void 0), _define_property(_this, "_group", void 0), _define_property(_this, "_height", void 0), _define_property(_this, "_labelClass", void 0), _define_property(_this, "_labelConfig", void 0), _define_property(_this, "_labelMin", void 0), _define_property(_this, "_labelMax", void 0), _define_property(_this, "_legendClass", void 0), _define_property(_this, "_legendConfig", void 0), _define_property(_this, "_midpoint", void 0), _define_property(_this, "_orient", void 0), _define_property(_this, "_outerBounds", void 0), _define_property(_this, "_padding", void 0), _define_property(_this, "_rectClass", void 0), _define_property(_this, "_rectConfig", void 0), _define_property(_this, "_scale", void 0), _define_property(_this, "_size", void 0), _define_property(_this, "_value", void 0), _define_property(_this, "_width", void 0);
|
|
115
117
|
_this._axisClass = new Axis();
|
|
116
118
|
_this._axisConfig = {
|
|
117
119
|
gridSize: 0
|
|
@@ -166,7 +168,10 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
166
168
|
_this._height = 200;
|
|
167
169
|
_this._labelClass = new TextBox();
|
|
168
170
|
_this._labelConfig = {
|
|
169
|
-
fontColor:
|
|
171
|
+
fontColor: function fontColor() {
|
|
172
|
+
var bg = _this._select ? backgroundColor(_this._select.node()) : "rgb(255, 255, 255)";
|
|
173
|
+
return colorContrast(bg);
|
|
174
|
+
},
|
|
170
175
|
fontSize: 12
|
|
171
176
|
};
|
|
172
177
|
_this._legendClass = new Legend();
|
|
@@ -199,11 +204,9 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
199
204
|
_create_class(ColorScale, [
|
|
200
205
|
{
|
|
201
206
|
/**
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
@chainable
|
|
206
|
-
*/ key: "render",
|
|
207
|
+
Renders the current ColorScale to the page.
|
|
208
|
+
@param callback Optional callback invoked after rendering completes.
|
|
209
|
+
*/ key: "render",
|
|
207
210
|
value: function render(callback) {
|
|
208
211
|
var _this = this;
|
|
209
212
|
if (this._select === void 0) this.select(select("body").append("svg").attr("width", "".concat(this._width, "px")).attr("height", "".concat(this._height, "px")).node());
|
|
@@ -229,6 +232,7 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
229
232
|
_instanceof(this._buckets, Array) ? this._buckets.length : this._buckets,
|
|
230
233
|
diverging && this._scale !== "jenks" ? 2 * Math.floor(unique(allValues).length / 2) - 1 : unique(allValues).length
|
|
231
234
|
]);
|
|
235
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
232
236
|
var colors = diverging && (!this._color || _instanceof(this._color, Array) && !this._color.includes(this._colorMid)) ? undefined : this._color, labels, ticks;
|
|
233
237
|
if (colors && !_instanceof(colors, Array)) {
|
|
234
238
|
colors = range(0, numBuckets, 1).map(function(i) {
|
|
@@ -292,13 +296,13 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
292
296
|
var positives1 = ticks.slice(0, buckets).filter(function(d) {
|
|
293
297
|
return d > _this._midpoint;
|
|
294
298
|
});
|
|
295
|
-
var negativeColors = negatives1.map(function(
|
|
299
|
+
var negativeColors = negatives1.map(function(_d, i) {
|
|
296
300
|
return !i ? colors[0] : colorLighter(colors[0], i / negatives1.length);
|
|
297
301
|
});
|
|
298
302
|
var spanningColors = spanning.map(function() {
|
|
299
303
|
return colors[1];
|
|
300
304
|
});
|
|
301
|
-
var positiveColors = positives1.map(function(
|
|
305
|
+
var positiveColors = positives1.map(function(_d, i) {
|
|
302
306
|
return i === positives1.length - 1 ? colors[2] : colorLighter(colors[2], 1 - (i + 1) / positives1.length);
|
|
303
307
|
});
|
|
304
308
|
colors = negativeColors.concat(spanningColors).concat(positiveColors);
|
|
@@ -317,6 +321,7 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
317
321
|
var buckets1 = _instanceof(this._buckets, Array) ? this._buckets : undefined;
|
|
318
322
|
if (diverging && !colors) {
|
|
319
323
|
var half1 = Math.floor(numBuckets / 2);
|
|
324
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
320
325
|
var negativeColorScale = interpolateRgb.gamma(2.2)(this._colorMin, this._colorMid);
|
|
321
326
|
var negativeColors1 = range(0, half1, 1).map(function(i) {
|
|
322
327
|
return negativeColorScale(i / half1);
|
|
@@ -326,6 +331,7 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
326
331
|
] : []).map(function() {
|
|
327
332
|
return _this._colorMid;
|
|
328
333
|
});
|
|
334
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
329
335
|
var positiveColorScale = interpolateRgb.gamma(2.2)(this._colorMax, this._colorMid);
|
|
330
336
|
var positiveColors1 = range(0, half1, 1).map(function(i) {
|
|
331
337
|
return positiveColorScale(i / half1);
|
|
@@ -410,7 +416,9 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
410
416
|
}
|
|
411
417
|
if (buckets1.includes(0)) buckets1[buckets1.indexOf(0)] = 1;
|
|
412
418
|
}
|
|
413
|
-
|
|
419
|
+
var scaleFn = this._scale === "buckets" || this._scale === "quantile" ? scaleThreshold : scaleLinear;
|
|
420
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
421
|
+
this._colorScale = scaleFn().domain(buckets1).range(colors);
|
|
414
422
|
}
|
|
415
423
|
if (this._colorScale.clamp) this._colorScale.clamp(true);
|
|
416
424
|
var gradient = this._bucketAxis || ![
|
|
@@ -455,6 +463,7 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
455
463
|
var ten = Math.pow(10, pow);
|
|
456
464
|
axisDomain[axisDomain.length - 1] = last + ten;
|
|
457
465
|
}
|
|
466
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
458
467
|
var axisConfig = assign({
|
|
459
468
|
domain: horizontal ? axisDomain : axisDomain.slice().reverse(),
|
|
460
469
|
duration: this._duration,
|
|
@@ -466,20 +475,28 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
466
475
|
ticks: ticks,
|
|
467
476
|
width: this._width
|
|
468
477
|
}, this._axisConfig);
|
|
478
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
469
479
|
var labelConfig = assign({
|
|
480
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
470
481
|
height: this["_".concat(height)] / 2,
|
|
482
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
471
483
|
width: this["_".concat(width)] / 2
|
|
472
484
|
}, this._labelConfig);
|
|
473
485
|
this._labelClass.config(labelConfig);
|
|
474
486
|
var labelData = [];
|
|
475
487
|
if (horizontal && this._labelMin) {
|
|
488
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
476
489
|
var labelCSS = {
|
|
490
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
477
491
|
"font-family": this._labelClass.fontFamily()(this._labelMin),
|
|
492
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
478
493
|
"font-size": this._labelClass.fontSize()(this._labelMin),
|
|
494
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
479
495
|
"font-weight": this._labelClass.fontWeight()(this._labelMin)
|
|
480
496
|
};
|
|
481
497
|
if (_instanceof(labelCSS["font-family"], Array)) labelCSS["font-family"] = labelCSS["font-family"][0];
|
|
482
498
|
var labelMinWidth = textWidth(this._labelMin, labelCSS);
|
|
499
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
483
500
|
if (labelMinWidth && labelMinWidth < this["_".concat(width)] / 2) {
|
|
484
501
|
labelData.push(this._labelMin);
|
|
485
502
|
labelMinWidth += this._padding;
|
|
@@ -488,13 +505,18 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
488
505
|
}
|
|
489
506
|
}
|
|
490
507
|
if (horizontal && this._labelMax) {
|
|
508
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
491
509
|
var labelCSS1 = {
|
|
510
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
492
511
|
"font-family": this._labelClass.fontFamily()(this._labelMax),
|
|
512
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
493
513
|
"font-size": this._labelClass.fontSize()(this._labelMax),
|
|
514
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
494
515
|
"font-weight": this._labelClass.fontWeight()(this._labelMax)
|
|
495
516
|
};
|
|
496
517
|
if (_instanceof(labelCSS1["font-family"], Array)) labelCSS1["font-family"] = labelCSS1["font-family"][0];
|
|
497
518
|
var labelMaxWidth = textWidth(this._labelMax, labelCSS1);
|
|
519
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
498
520
|
if (labelMaxWidth && labelMaxWidth < this["_".concat(width)] / 2) {
|
|
499
521
|
labelData.push(this._labelMax);
|
|
500
522
|
labelMaxWidth += this._padding;
|
|
@@ -509,12 +531,15 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
509
531
|
parent: this._group
|
|
510
532
|
}).node()).config(axisConfig).duration(0).render();
|
|
511
533
|
var axisBounds = this._axisTest.outerBounds();
|
|
534
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
512
535
|
this._outerBounds[width] = this["_".concat(width)] - this._padding * 2;
|
|
513
536
|
this._outerBounds[height] = axisBounds[height] + this._size;
|
|
514
537
|
this._outerBounds[x] = this._padding;
|
|
515
538
|
this._outerBounds[y] = this._padding;
|
|
516
|
-
if (this._align === "middle") this._outerBounds[y] =
|
|
517
|
-
|
|
539
|
+
if (this._align === "middle") this._outerBounds[y] = // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
540
|
+
(this["_".concat(height)] - this._outerBounds[height]) / 2;
|
|
541
|
+
else if (this._align === "end") this._outerBounds[y] = // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
542
|
+
this["_".concat(height)] - this._padding - this._outerBounds[height];
|
|
518
543
|
var axisGroupOffset = this._outerBounds[y] + ([
|
|
519
544
|
"bottom",
|
|
520
545
|
"right"
|
|
@@ -531,6 +556,7 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
531
556
|
})).node()).config(axisConfig).align("start").render();
|
|
532
557
|
var axisScale = this._axisTest._getPosition.bind(this._axisTest);
|
|
533
558
|
var scaleRange = this._axisTest._getRange();
|
|
559
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
534
560
|
var defs = this._group.selectAll("defs").data([
|
|
535
561
|
0
|
|
536
562
|
]);
|
|
@@ -547,14 +573,15 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
547
573
|
100,
|
|
548
574
|
0
|
|
549
575
|
]);
|
|
550
|
-
stops.enter().append("stop").merge(stops).attr("offset", function(
|
|
576
|
+
stops.enter().append("stop").merge(stops).attr("offset", function(_d, i) {
|
|
551
577
|
return "".concat(i <= scaleDomain.length - 1 ? offsetScale(axisScale(scaleDomain[i])) : 100, "%");
|
|
552
578
|
}).attr("stop-color", String);
|
|
553
|
-
/** determines the width of buckets
|
|
579
|
+
/** determines the width of buckets*/ var bucketWidth = function bucketWidth(d, i) {
|
|
554
580
|
var next = ticks[i + 1] || axisDomain[axisDomain.length - 1];
|
|
555
581
|
return Math.abs(axisScale(next) - axisScale(d));
|
|
556
582
|
};
|
|
557
583
|
var _obj;
|
|
584
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
558
585
|
var rectConfig = assign((_obj = {
|
|
559
586
|
duration: this._duration,
|
|
560
587
|
fill: ticks ? function(d) {
|
|
@@ -569,14 +596,17 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
569
596
|
"top",
|
|
570
597
|
"left"
|
|
571
598
|
].includes(this._orient) ? axisBounds[height] : 0) + this._size / 2 + offsets[y]), _define_property(_obj, width, ticks ? bucketWidth : scaleRange[1] - scaleRange[0]), _define_property(_obj, height, this._size), _obj), this._rectConfig);
|
|
572
|
-
this._rectClass
|
|
599
|
+
this._rectClass// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
600
|
+
.data(ticks || [
|
|
573
601
|
0
|
|
574
|
-
])
|
|
602
|
+
])// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
603
|
+
.id(function(_d, i) {
|
|
575
604
|
return i;
|
|
576
605
|
}).select(rectGroup.node()).config(rectConfig).render();
|
|
577
606
|
labelConfig.height = this._outerBounds[height];
|
|
578
607
|
labelConfig.width = this._outerBounds[width];
|
|
579
|
-
this._labelClass.config(labelConfig)
|
|
608
|
+
this._labelClass.config(labelConfig)// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
609
|
+
.data(labelData).select(labelGroup.node()).x(function(d) {
|
|
580
610
|
return d === _this._labelMax ? rectConfig.x + rectConfig.width / 2 + _this._padding : _this._outerBounds.x;
|
|
581
611
|
}).y(function(d) {
|
|
582
612
|
return rectConfig.y - _this._labelClass.fontSize()(d) / 2;
|
|
@@ -626,324 +656,179 @@ var ColorScale = /*#__PURE__*/ function(BaseClass) {
|
|
|
626
656
|
}
|
|
627
657
|
},
|
|
628
658
|
{
|
|
629
|
-
|
|
630
|
-
@memberof ColorScale
|
|
631
|
-
@desc The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Axis](http://d3plus.org/docs/#Axis). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
632
|
-
@param {Object} [*value*]
|
|
633
|
-
@chainable
|
|
634
|
-
*/ key: "axisConfig",
|
|
659
|
+
key: "axisConfig",
|
|
635
660
|
value: function axisConfig(_) {
|
|
636
661
|
return arguments.length ? (this._axisConfig = assign(this._axisConfig, _), this) : this._axisConfig;
|
|
637
662
|
}
|
|
638
663
|
},
|
|
639
664
|
{
|
|
640
|
-
|
|
641
|
-
@memberof ColorScale
|
|
642
|
-
@desc If *value* is specified, sets the horizontal alignment to the specified value and returns the current class instance. If *value* is not specified, returns the current horizontal alignment.
|
|
643
|
-
@param {String} [*value* = "center"] Supports `"left"` and `"center"` and `"right"`.
|
|
644
|
-
@chainable
|
|
645
|
-
*/ key: "align",
|
|
665
|
+
key: "align",
|
|
646
666
|
value: function align(_) {
|
|
647
667
|
return arguments.length ? (this._align = _, this) : this._align;
|
|
648
668
|
}
|
|
649
669
|
},
|
|
650
670
|
{
|
|
651
|
-
|
|
652
|
-
@memberof ColorScale
|
|
653
|
-
@desc The number of discrete buckets to create in a bucketed color scale. Will be overridden by any custom Array of colors passed to the `color` method. Optionally, users can supply an Array of values used to separate buckets, such as `[0, 10, 25, 50, 90]` for a percentage scale. This value would create 4 buckets, with each value representing the break point between each bucket (so 5 values makes 4 buckets).
|
|
654
|
-
@param {Number|Array} [*value* = 5]
|
|
655
|
-
@chainable
|
|
656
|
-
*/ key: "buckets",
|
|
671
|
+
key: "buckets",
|
|
657
672
|
value: function buckets(_) {
|
|
658
673
|
return arguments.length ? (this._buckets = _, this) : this._buckets;
|
|
659
674
|
}
|
|
660
675
|
},
|
|
661
676
|
{
|
|
662
|
-
|
|
663
|
-
@memberof ColorScale
|
|
664
|
-
@desc Determines whether or not to use an Axis to display bucket scales (both "buckets" and "jenks"). When set to `false`, bucketed scales will use the `Legend` class to display squares for each range of data. When set to `true`, bucketed scales will be displayed on an `Axis`, similar to "linear" scales.
|
|
665
|
-
@param {Boolean} [*value* = false]
|
|
666
|
-
@chainable
|
|
667
|
-
*/ key: "bucketAxis",
|
|
677
|
+
key: "bucketAxis",
|
|
668
678
|
value: function bucketAxis(_) {
|
|
669
679
|
return arguments.length ? (this._bucketAxis = _, this) : this._bucketAxis;
|
|
670
680
|
}
|
|
671
681
|
},
|
|
672
682
|
{
|
|
673
|
-
|
|
674
|
-
@memberof ColorScale
|
|
675
|
-
@desc A function for formatting the labels associated to each bucket in a bucket-type scale ("jenks", "quantile", etc). The function is passed four arguments: the start value of the current bucket, it's index in the full Array of buckets, the full Array of buckets, and an Array of every value present in the data used to construct the buckets. Keep in mind that the end value for the bucket is not actually the next bucket in the list, but includes every value up until that next bucket value (less than, but not equal to). By default, d3plus will make the end value slightly less than it's current value, so that it does not overlap with the start label for the next bucket.
|
|
676
|
-
@param {Function} [*value*]
|
|
677
|
-
@chainable
|
|
678
|
-
*/ key: "bucketFormat",
|
|
683
|
+
key: "bucketFormat",
|
|
679
684
|
value: function bucketFormat(_) {
|
|
680
685
|
return arguments.length ? (this._bucketFormat = _, this) : this._bucketFormat;
|
|
681
686
|
}
|
|
682
687
|
},
|
|
683
688
|
{
|
|
684
|
-
|
|
685
|
-
@memberof ColorScale
|
|
686
|
-
@desc A function that receives the minimum and maximum values of a bucket, and is expected to return the full label.
|
|
687
|
-
@param {Function} [*value*]
|
|
688
|
-
@chainable
|
|
689
|
-
*/ key: "bucketJoiner",
|
|
689
|
+
key: "bucketJoiner",
|
|
690
690
|
value: function bucketJoiner(_) {
|
|
691
691
|
return arguments.length ? (this._bucketJoiner = _, this) : this._bucketJoiner;
|
|
692
692
|
}
|
|
693
693
|
},
|
|
694
694
|
{
|
|
695
|
-
|
|
696
|
-
@memberof ColorScale
|
|
697
|
-
@desc Determines whether or not to display a midpoint centered Axis. Does not apply to quantile scales.
|
|
698
|
-
@param {Boolean} [*value* = false]
|
|
699
|
-
@chainable
|
|
700
|
-
*/ key: "centered",
|
|
695
|
+
key: "centered",
|
|
701
696
|
value: function centered(_) {
|
|
702
697
|
return arguments.length ? (this._centered = _, this) : this._centered;
|
|
703
698
|
}
|
|
704
699
|
},
|
|
705
700
|
{
|
|
706
|
-
|
|
707
|
-
@memberof ColorScale
|
|
708
|
-
@desc Overrides the default internal logic of `colorMin`, `colorMid`, and `colorMax` to only use just this specified color. If a single color is given as a String, then the scale is interpolated by lightening that color. Otherwise, the function expects an Array of color values to be used in order for the scale.
|
|
709
|
-
@param {String|Array} [*value*]
|
|
710
|
-
@chainable
|
|
711
|
-
*/ key: "color",
|
|
701
|
+
key: "color",
|
|
712
702
|
value: function color(_) {
|
|
713
703
|
return arguments.length ? (this._color = _, this) : this._color;
|
|
714
704
|
}
|
|
715
705
|
},
|
|
716
706
|
{
|
|
717
|
-
|
|
718
|
-
@memberof ColorScale
|
|
719
|
-
@desc Defines the color to be used for numbers greater than the value of the `midpoint` on the scale (defaults to `0`). Colors in between this value and the value of `colorMid` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
720
|
-
@param {String} [*value* = "#0C8040"]
|
|
721
|
-
@chainable
|
|
722
|
-
*/ key: "colorMax",
|
|
707
|
+
key: "colorMax",
|
|
723
708
|
value: function colorMax(_) {
|
|
724
709
|
return arguments.length ? (this._colorMax = _, this) : this._colorMax;
|
|
725
710
|
}
|
|
726
711
|
},
|
|
727
712
|
{
|
|
728
|
-
|
|
729
|
-
@memberof ColorScale
|
|
730
|
-
@desc Defines the color to be used for the midpoint of a diverging scale, based on the current value of the `midpoint` method (defaults to `0`). Colors in between this value and the values of `colorMin` and `colorMax` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
731
|
-
@param {String} [*value* = "#f7f7f7"]
|
|
732
|
-
@chainable
|
|
733
|
-
*/ key: "colorMid",
|
|
713
|
+
key: "colorMid",
|
|
734
714
|
value: function colorMid(_) {
|
|
735
715
|
return arguments.length ? (this._colorMid = _, this) : this._colorMid;
|
|
736
716
|
}
|
|
737
717
|
},
|
|
738
718
|
{
|
|
739
|
-
|
|
740
|
-
@memberof ColorScale
|
|
741
|
-
@desc Defines the color to be used for numbers less than the value of the `midpoint` on the scale (defaults to `0`). Colors in between this value and the value of `colorMid` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
742
|
-
@param {String} [*value* = "#b22200"]
|
|
743
|
-
@chainable
|
|
744
|
-
*/ key: "colorMin",
|
|
719
|
+
key: "colorMin",
|
|
745
720
|
value: function colorMin(_) {
|
|
746
721
|
return arguments.length ? (this._colorMin = _, this) : this._colorMin;
|
|
747
722
|
}
|
|
748
723
|
},
|
|
749
724
|
{
|
|
750
|
-
|
|
751
|
-
@memberof ColorScale
|
|
752
|
-
@desc If *data* is specified, sets the data array to the specified array and returns the current class instance. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
|
|
753
|
-
@param {Array} [*data* = []]
|
|
754
|
-
@chainable
|
|
755
|
-
*/ key: "data",
|
|
725
|
+
key: "data",
|
|
756
726
|
value: function data(_) {
|
|
757
727
|
return arguments.length ? (this._data = _, this) : this._data;
|
|
758
728
|
}
|
|
759
729
|
},
|
|
760
730
|
{
|
|
761
|
-
|
|
762
|
-
@memberof ColorScale
|
|
763
|
-
@desc In a linear scale, this Array of 2 values defines the min and max values used in the color scale. Any values outside of this range will be mapped to the nearest color value.
|
|
764
|
-
@param {Array} [*value*]
|
|
765
|
-
@chainable
|
|
766
|
-
*/ key: "domain",
|
|
731
|
+
key: "domain",
|
|
767
732
|
value: function domain(_) {
|
|
768
733
|
return arguments.length ? (this._domain = _, this) : this._domain;
|
|
769
734
|
}
|
|
770
735
|
},
|
|
771
736
|
{
|
|
772
|
-
|
|
773
|
-
@memberof ColorScale
|
|
774
|
-
@desc If *value* is specified, sets the transition duration of the ColorScale and returns the current class instance. If *value* is not specified, returns the current duration.
|
|
775
|
-
@param {Number} [*value* = 600]
|
|
776
|
-
@chainable
|
|
777
|
-
*/ key: "duration",
|
|
737
|
+
key: "duration",
|
|
778
738
|
value: function duration(_) {
|
|
779
739
|
return arguments.length ? (this._duration = _, this) : this._duration;
|
|
780
740
|
}
|
|
781
741
|
},
|
|
782
742
|
{
|
|
783
|
-
|
|
784
|
-
@memberof ColorScale
|
|
785
|
-
@desc If *value* is specified, sets the overall height of the ColorScale and returns the current class instance. If *value* is not specified, returns the current height value.
|
|
786
|
-
@param {Number} [*value* = 100]
|
|
787
|
-
@chainable
|
|
788
|
-
*/ key: "height",
|
|
743
|
+
key: "height",
|
|
789
744
|
value: function height(_) {
|
|
790
745
|
return arguments.length ? (this._height = _, this) : this._height;
|
|
791
746
|
}
|
|
792
747
|
},
|
|
793
748
|
{
|
|
794
|
-
|
|
795
|
-
@memberof ColorScale
|
|
796
|
-
@desc A pass-through for the [TextBox](http://d3plus.org/docs/#TextBox) class used to style the labelMin and labelMax text.
|
|
797
|
-
@param {Object} [*value*]
|
|
798
|
-
@chainable
|
|
799
|
-
*/ key: "labelConfig",
|
|
749
|
+
key: "labelConfig",
|
|
800
750
|
value: function labelConfig(_) {
|
|
801
751
|
return arguments.length ? (this._labelConfig = assign(this._labelConfig, _), this) : this._labelConfig;
|
|
802
752
|
}
|
|
803
753
|
},
|
|
804
754
|
{
|
|
805
|
-
|
|
806
|
-
@memberof ColorScale
|
|
807
|
-
@desc Defines a text label to be displayed off of the end of the minimum point in the scale (currently only available in horizontal orientation).
|
|
808
|
-
@param {String} [*value*]
|
|
809
|
-
@chainable
|
|
810
|
-
*/ key: "labelMin",
|
|
755
|
+
key: "labelMin",
|
|
811
756
|
value: function labelMin(_) {
|
|
812
757
|
return arguments.length ? (this._labelMin = _, this) : this._labelMin;
|
|
813
758
|
}
|
|
814
759
|
},
|
|
815
760
|
{
|
|
816
|
-
|
|
817
|
-
@memberof ColorScale
|
|
818
|
-
@desc Defines a text label to be displayed off of the end of the maximum point in the scale (currently only available in horizontal orientation).
|
|
819
|
-
@param {String} [*value*]
|
|
820
|
-
@chainable
|
|
821
|
-
*/ key: "labelMax",
|
|
761
|
+
key: "labelMax",
|
|
822
762
|
value: function labelMax(_) {
|
|
823
763
|
return arguments.length ? (this._labelMax = _, this) : this._labelMax;
|
|
824
764
|
}
|
|
825
765
|
},
|
|
826
766
|
{
|
|
827
|
-
|
|
828
|
-
@memberof ColorScale
|
|
829
|
-
@desc The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Axis](http://d3plus.org/docs/#Axis). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
830
|
-
@param {Object} [*value*]
|
|
831
|
-
@chainable
|
|
832
|
-
*/ key: "legendConfig",
|
|
767
|
+
key: "legendConfig",
|
|
833
768
|
value: function legendConfig(_) {
|
|
834
769
|
return arguments.length ? (this._legendConfig = assign(this._legendConfig, _), this) : this._legendConfig;
|
|
835
770
|
}
|
|
836
771
|
},
|
|
837
772
|
{
|
|
838
|
-
|
|
839
|
-
@memberof ColorScale
|
|
840
|
-
@desc The number value to be used as the anchor for `colorMid`, and defines the center point of the diverging color scale.
|
|
841
|
-
@param {Number} [*value* = 0]
|
|
842
|
-
@chainable
|
|
843
|
-
*/ key: "midpoint",
|
|
773
|
+
key: "midpoint",
|
|
844
774
|
value: function midpoint(_) {
|
|
845
775
|
return arguments.length ? (this._midpoint = _, this) : this._midpoint;
|
|
846
776
|
}
|
|
847
777
|
},
|
|
848
778
|
{
|
|
849
|
-
|
|
850
|
-
@memberof ColorScale
|
|
851
|
-
@desc Sets the flow of the items inside the ColorScale. If no value is passed, the current flow will be returned.
|
|
852
|
-
@param {String} [*value* = "bottom"]
|
|
853
|
-
@chainable
|
|
854
|
-
*/ key: "orient",
|
|
779
|
+
key: "orient",
|
|
855
780
|
value: function orient(_) {
|
|
856
781
|
return arguments.length ? (this._orient = _, this) : this._orient;
|
|
857
782
|
}
|
|
858
783
|
},
|
|
859
784
|
{
|
|
860
785
|
/**
|
|
861
|
-
|
|
862
|
-
@desc If called after the elements have been drawn to DOM, will returns the outer bounds of the ColorScale content.
|
|
786
|
+
Returns the outer bounds of the ColorScale content. Must be called after rendering.
|
|
863
787
|
@example
|
|
864
788
|
{"width": 180, "height": 24, "x": 10, "y": 20}
|
|
865
|
-
|
|
789
|
+
*/ key: "outerBounds",
|
|
866
790
|
value: function outerBounds() {
|
|
867
791
|
return this._outerBounds;
|
|
868
792
|
}
|
|
869
793
|
},
|
|
870
794
|
{
|
|
871
|
-
|
|
872
|
-
@memberof ColorScale
|
|
873
|
-
@desc If *value* is specified, sets the padding between each key to the specified number and returns the current class instance. If *value* is not specified, returns the current padding value.
|
|
874
|
-
@param {Number} [*value* = 10]
|
|
875
|
-
@chainable
|
|
876
|
-
*/ key: "padding",
|
|
795
|
+
key: "padding",
|
|
877
796
|
value: function padding(_) {
|
|
878
797
|
return arguments.length ? (this._padding = _, this) : this._padding;
|
|
879
798
|
}
|
|
880
799
|
},
|
|
881
800
|
{
|
|
882
|
-
|
|
883
|
-
@memberof ColorScale
|
|
884
|
-
@desc The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Rect](http://d3plus.org/docs/#Rect). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
885
|
-
@param {Object} [*value*]
|
|
886
|
-
@chainable
|
|
887
|
-
*/ key: "rectConfig",
|
|
801
|
+
key: "rectConfig",
|
|
888
802
|
value: function rectConfig(_) {
|
|
889
803
|
return arguments.length ? (this._rectConfig = assign(this._rectConfig, _), this) : this._rectConfig;
|
|
890
804
|
}
|
|
891
805
|
},
|
|
892
806
|
{
|
|
893
|
-
|
|
894
|
-
@memberof ColorScale
|
|
895
|
-
@desc If *value* is specified, sets the scale of the ColorScale and returns the current class instance. If *value* is not specified, returns the current scale value.
|
|
896
|
-
@param {String} [*value* = "linear"] Can either be "linear", "jenks", or "buckets".
|
|
897
|
-
@chainable
|
|
898
|
-
*/ key: "scale",
|
|
807
|
+
key: "scale",
|
|
899
808
|
value: function scale(_) {
|
|
900
809
|
return arguments.length ? (this._scale = _, this) : this._scale;
|
|
901
810
|
}
|
|
902
811
|
},
|
|
903
812
|
{
|
|
904
|
-
|
|
905
|
-
@memberof ColorScale
|
|
906
|
-
@desc If *selector* is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If *selector* is not specified, returns the current SVG container element.
|
|
907
|
-
@param {String|HTMLElement} [*selector* = d3.select("body").append("svg")]
|
|
908
|
-
@chainable
|
|
909
|
-
*/ key: "select",
|
|
813
|
+
key: "select",
|
|
910
814
|
value: function select1(_) {
|
|
911
815
|
return arguments.length ? (this._select = select(_), this) : this._select;
|
|
912
816
|
}
|
|
913
817
|
},
|
|
914
818
|
{
|
|
915
|
-
|
|
916
|
-
@memberof ColorScale
|
|
917
|
-
@desc The height of horizontal color scales, and width when positioned vertical.
|
|
918
|
-
@param {Number} [*value* = 10]
|
|
919
|
-
@chainable
|
|
920
|
-
*/ key: "size",
|
|
819
|
+
key: "size",
|
|
921
820
|
value: function size(_) {
|
|
922
821
|
return arguments.length ? (this._size = _, this) : this._size;
|
|
923
822
|
}
|
|
924
823
|
},
|
|
925
824
|
{
|
|
926
|
-
|
|
927
|
-
@memberof ColorScale
|
|
928
|
-
@desc If *value* is specified, sets the value accessor to the specified function or string and returns the current class instance. If *value* is not specified, returns the current value accessor.
|
|
929
|
-
@param {Function|String} [*value*]
|
|
930
|
-
@chainable
|
|
931
|
-
@example
|
|
932
|
-
function value(d) {
|
|
933
|
-
return d.value;
|
|
934
|
-
}
|
|
935
|
-
*/ key: "value",
|
|
825
|
+
key: "value",
|
|
936
826
|
value: function value(_) {
|
|
937
827
|
return arguments.length ? (this._value = typeof _ === "function" ? _ : constant(_), this) : this._value;
|
|
938
828
|
}
|
|
939
829
|
},
|
|
940
830
|
{
|
|
941
|
-
|
|
942
|
-
@memberof ColorScale
|
|
943
|
-
@desc If *value* is specified, sets the overall width of the ColorScale and returns the current class instance. If *value* is not specified, returns the current width value.
|
|
944
|
-
@param {Number} [*value* = 400]
|
|
945
|
-
@chainable
|
|
946
|
-
*/ key: "width",
|
|
831
|
+
key: "width",
|
|
947
832
|
value: function width(_) {
|
|
948
833
|
return arguments.length ? (this._width = _, this) : this._width;
|
|
949
834
|
}
|
|
@@ -952,7 +837,5 @@ function value(d) {
|
|
|
952
837
|
return ColorScale;
|
|
953
838
|
}(BaseClass);
|
|
954
839
|
/**
|
|
955
|
-
|
|
956
|
-
@extends BaseClass
|
|
957
|
-
@desc Creates an SVG scale based on an array of data. If *data* is specified, immediately draws based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.
|
|
840
|
+
Creates an SVG color scale based on an array of data.
|
|
958
841
|
*/ export { ColorScale as default };
|