new profile(options)
Provides a D3js component to be used to draw an elevation profile chart.
let selection = d3.select('#element_id');
let profile = ngeo.profile({
distanceExtractor: function (item) {return item['dist'];},
linesConfiguration: {
'lineZ1': {
zExtractor: function (item) {return item['values']['z1'];}
},
'lineZ2': {
color: '#00F',
zExtractor: function (item) {return item['values']['z2'];}
}
},
hoverCallback: function(point, dist, xUnits, elevations, yUnits) {
console.log(point.x, point.y);
},
outCallback: function() {
console.log("out");
}
});
selection.datum(data).call(profile);The selection data must be an array. The layout for the items of this array is unconstrained: the distance values is extracted using the distanceExtractor config option and multiples z values can be displayed by providing multiple linesConfiguration with its specific zExtractor. Optionally you can provide a color in your linesConfiguration. A line without color will be red. Each linesConfiguration name is used as class for its respective line. So you can pass a styleDefs config option (inline css) to customize the line or all the chart. Optionally, POIs can be displayed and depend on a poiExtractor config option.
The data below will work for the above example:
[
{
"y": 199340,
"values": {"z1": 788.7, "z2": 774.2},
"dist": 0.0,
"x": 541620
}, ...
]Parameters:
| Name | Type | Description |
|---|---|---|
options |
ngeox.profile.ProfileOptions | Profile options. |
Returns:
D3js component.
Members
(inner, constant) bisectDistance
Method to get the coordinate in pixels from a distance.
(inner, constant) distanceExtractor
Distance data extractor used to get the dist values.
(inner, constant) formatter: ngeox.profile.ProfileFormatter
(inner) height
Height of the chart in pixels
(inner, constant) hoverCallback: function
Hover callback function.
(inner, constant) i18n: Object:.<string:, string:>
(inner, constant) light: boolean
Whether the simplified profile should be shown.
(inner, constant) lightXAxis: boolean
(inner, constant) linesConfiguration
Line configuration object.
(inner, constant) margin
The values for margins around the chart defined in pixels.
(inner, constant) numberOfLines
Number of differents configurations for the line.
(inner, constant) outCallback: function
Out callback function.
(inner, constant) poiExtractor
POI data extractor.
(inner, constant) poiLabelAngle: number
(inner, constant) scaleModifier
Scale modifier to allow customizing the x and y scales.
(inner, constant) styleDefs
Optional SVG inline style.
(inner) svg: Object
(inner) width
Width of the chart in pixels
(inner) x
D3 x scale.
(inner, constant) xAxisLabel: string
(inner) xDomain
D3 extent of the distance.
(inner) xFactor
Factor to determine whether to use 'm' or 'km'.
(inner) xUnits
Distance units. Either 'm' or 'km'.
(inner) y
D3 y scale.