d3-vs
v1.3.4
Published
d3 visualisation with vuejs
Downloads
1,333
Readme
Vs
Vue Visualisation Package using d3.js
and leaflet
. See also:
- LayoutGrid : Creating a powerful dashboard using
Vs
andvue-grid-layout
Installation
npm i -S d3-vs
Usage
import Vs from 'd3-vs';
// install globally all components
Vue.use(Vs);
// import only the components that you need and register it manually
import {
// Flow Of transition
d3SankeyCircular,
// Time Serie
d3Timelion,
d3Timeline,
// Basic
d3Pie,
d3Line,
d3Metric,
d3MultiLine,
d3HorizontalBar,
d3VerticalBar,
d3GroupedArea,
d3Area,
d3Circle,
// Functional
d3Player,
d3HorizontalSlider,
d3VerticalSlider,
// Layout
d3Sunburst,
d3Tree,
d3Pack,
d3Cluster,
d3ICicleVertical,
d3ICicleHorizontal,
// Leaflet
d3LChoropleth,
d3LHeat
} from 'd3-vs';
Basic
###d3Metric
This component is for showing simple scientific data. It accepts the type Number
as data.
template
<d3-metric
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-metric>
options
|key|description|type|default|
|:---|:---|:---|:---|
|axisXLabel
|horizontal label which will be put above the data
|string OR null
|null
|
|axisLabelFontSize
|label font size
|number
|12
|
|axisLabelFontWeight
|label font weight
|number
|400
|
|axisLabelFontOpacity
|label font opacity
|number ([0, 1])
|0.5
|
|metricLabelColor
|metric color
|string (rgb, hex, rgba, hsl...)
|#000000
|
|metricLabelFontSize
|metric font size
|number
|120
|
|metricLabelFontWeight
|metric font weight
|number
|900
|
|metricLabelFontOpacity
|metric font opacity
|number ([0, 1])
|0.5
|
|metricTitle
|metric tooltip
|function
|d => d
|
|metricPrecision
|metric precision
|number
|2
|
###d3Circle
This component is for showing simple percentage data. It accepts the type Number
as data. The data must be in the range [0, 1]
.
template
<d3-circle
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-circle>
options
|key|description|type|default|
|:---|:---|:---|:---|
|innerRadiusRatio
|innerRadius / outerRadius
|number
|0.8
|
|circleBackground
|circle background color
|string (rgb, hex, rgba, hsl...)
|rgb(230, 237, 244)
|
|circleForeground
|circle foreground color
|string (rgb, hex, rgba, hsl...)
|rgb(0, 181, 241)
|
|labelColor
|label color
|string (rgb, hex, rgba, hsl...)
|rgb(0, 181, 241)
|
|labelFontSize
|label font size
|number
|50
|
|labelFontWeight
|label font weight
|number
|900
|
|labelFontOpacity
|label font opacity
|number
|0.5
|
|precision
|precision of data
|number
|2
|
|animationDuration
|duration of animation
|number
|1000
|
|delay
|delay of animation (milliseconds)
|number
|50
|
###d3Pie
This component can be a pie chart or a donut chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}
. key
will be used
in tooltip, value
will be used to calculate the angle needed.
template
<d3-pie
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-pie>
options
|key|description|type|default|
|:---|:---|:---|:---|
|innerRadius
|inner radius
|number
|50
|
|cornerRadius
|corner radius
|number
|0
|
|padAngle
|pad angle (percentage)
|number
|0.01
|
|arcTitle
|tooltip
|function
|d => d.data.key + '<br>' + d.data.value
|
|arcLabel
|label will be shown in arcs
|string OR null
|null
|
|axisXLabel
|label of axis x
|string OR null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
| abel font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number ([0, 1])
|1
|
|arcLabelFontSize
|label font size of arcs
|number
|9
|
|arcLabelFontWeight
| abel font weight of arcs
|number
|400
|
|arcLabelFontOpacity
|label font opacity of arcs
|number ([0, 1])
|0.5
|
|animationDuration
|duration of animation
|number
|1000
|
|defaultColor
|color will be used when there is only one item in array
|string (rgb, hex, rgba, hsl...)
|rgb(175, 240, 91)
|
###d3VerticalBar
This component is for showing scientific data in vertical bar chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}
, key
will be
used in tooltip, value will be used to calculate the height needed. By default when every key
is of type Date
or Number
, brush will be enabled. You can choose a new range
by using the brush or by clicking a bar if options.axisXInterval
has been settled.
template
<d3-vertical-bar
:data="data"
:options="options"
:margin="margin"
width="100%"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
height="300px">
</d3-vertical-bar>
options
|key|description|type|default|
|:---|:---|:---|:---|
|fill
|bar internal color
|string (rgb, hex, hsl...)
|#6eadc1
|
|stroke
|bar edge color
|string (rgb, hex, hsl...)
|#6eadc1
|
|fillOpacity
|bar internal color opacity
|number
|0.6
|
|strokeOpacity
|bar edge color opacity
|number
|1
|
|barTitle
|tooltip
|function
|d => d.value
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXLaneHeight
|lane height of axis x
|number
|60
|
|axisYLaneWidth
|lane width of axis y
|number
|35
|
|axisXInterval
|used when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)
|number OR null
|null
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|animationDuration
|duration of animation
|number
|1000
|
|delay
|delay of animation (milliseconds)
|number
|50
|
|axisYTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|true
|
events
|name|description|arguments|
|:---|:---|:---|
|range-updated
|new range has been chosen by using the brush or by clicking a bar
|(dateTimeStart, dateTimeEnd)
|
###d3HorizontalBar
This component is for showing scientific data in horizontal bar chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}
, key
will be
used in tooltip, value will be used to calculate the width needed. By default when every key
is of type Date
or Number
, brush will be enabled. You can chose a new range
by using the brush or by clicking a bar if options.axisYInterval
has been settled.
template
<d3-horizontal-bar
:data="data"
:options="options"
:margin="margin"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
width="100%"
height="300px">
</d3-horizontal-bar>
options
|key|description|type|default|
|:---|:---|:---|:---|
|fill
|bar internal color
|string (rgb, hex, hsl...)
|#6eadc1
|
|stroke
|bar edge color
|string (rgb, hex, hsl...)
|#6eadc1
|
|fillOpacity
|bar internal color opacity
|number
|0.6
|
|strokeOpacity
|bar edge color opacity
|number
|1
|
|barTitle
|tooltip
|function
|d => d.value
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXLaneHeight
|lane height of axis x
|number
|35
|
|axisYLaneWidth
|lane width of axis y
|number
|120
|
|axisYInterval
|used when data is of type date_histogram, it will be used to calculate the date format of axis y. (unit: ms)
|number OR null
|null
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|animationDuration
|duration of animation
|number
|1000
|
|delay
|delay of animation (milliseconds)
|number
|50
|
|axisXTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
events
|name|description|arguments|
|:---|:---|:---|
|range-updated
|new range has been chosen by using the brush or by clicking a bar
|(dateTimeStart, dateTimeEnd)
|
###d3Line
This component is for showing scientific data in line chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}
, key
will be
used in tooltip, value will be used to calculate the width needed. By default when every key
is of type Date
or Number
, brush will be enabled. You can chose a new range
by using the brush.
template
<d3-line
:data="data"
:options="options"
:margin="margin"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
width="100%"
height="300px">
</d3-line>
options
|key|description|type|default|
|:---|:---|:---|:---|
|stroke
|line edge color
|string (rgb, hex, rgba, hsl...)
|rgb(188, 82, 188)
|
|strokeWidth
|line edge width
|number
|2
|
|axisXLaneHeight
|lane height of the axis x
|number
|60
|
|axisYLaneWidth
|lane width of the axis y
|number
|35
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number
|1
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|circleRadius
|emphasis circle radius
|number
|5
|
|circleColor
|emphasis circle color
|number
|rgb(188, 82, 188)
|
|circleTitle
|emphasis circle tooltip
|function
|d => d.value
|
|curve
|curve algorithm
|string
|curveCardinal
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXInterval
|used when data is of type date_histogram, it will be used to decide the date format of axis x
|number OR null
|null
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|axisXTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|true
|
events
|name|description|arguments|
|:---|:---|:---|
|range-updated
|new range has been chosen by using the brush|
(dateTimeStart, dateTimeEnd)`|
###d3Area
This components is for show big date_histogram data, It takes an array of elements like {key : 'Date', value : 'Number'}
.
template
<d3-area
:data="data"
:options="options"
:margin="margin"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
width="100%"
height="300px">
</d3-area>
options
|key|description|type|default|
|:---|:---|:---|:---|
|fill
|area path internal color
|string (rgb, hex, hsl...)
|#6eadc1
|
|fillOpacity
|area path internal color opacity
|number
|0.6
|
|stroke
|area path edge color
|string (rgb, hex, rgba, hsl...)
|rgb(188, 82, 188)
|
|strokeOpacity
|area path edge color opacity
|number
|1
|
|areaTitle
|tooltip
|function
|d => d.value
|
|axisXLaneHeight
|lane height of the axis x
|number
|35
|
|axisYLaneWidth
|lane width of the axis y
|number
|60
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number
|1
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|curve
|curve algorithm
|string
|curveLinear
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|true
|
###d3MultiLine
This component is for showing multiple lines together. It takes an array of elements like {group: 'string', key : 'String|Date|Number', value: 'Number'}
.
template
<d3-multi-line
:data="data"
:options="options"
:margin="margin"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
width="100%"
height="300px">
</d3-multi-line>
options
|key|description|type|default|
|:---|:---|:---|:---|
|strokeWidth
|line edge width
|number
|2
|
|axisXLaneHeight
|lane height of the axis x
|number
|60
|
|axisYLaneWidth
|lane width of the axis y
|number
|35
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number
|1
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|circleRadius
|emphasis circle radius
|number
|5
|
|circleTitle
|emphasis circle tooltip
|function
|d => d.value
|
|crossWidth
|legend cross line edge width
|number
|2
|
|crossColor
|legend cross line color
|string (rgb, hex, rgba, hsl...)
|white
|
|curve
|curve algorithm
|string
|curveCardinal
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXInterval
|used when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)
|number OR null
|null
|
|axisXTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|false
|
|axisXGroupLabelLaneHeight
|group lane height
|number
|20
|
|axisXGroupLabelFillColorOpacity
|group legend internal color opacity
|number
|1
|
|axisXGroupLabelBorderColorOpacity
|group legend edge color opacity
|number
|0.6
|
|axisXGroupLabelGap
|group legend gap
|number
|10
|
###d3GroupedArea
This component is for showing multiple lines together. It takes an array of elements like {group: 'string', key : 'String|Date|Number', value: 'Number'}
.
template
<d3-grouped-area
:data="data"
:options="options"
:margin="margin"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
width="100%"
height="300px">
</d3-grouped-area>
options
|key|description|type|default|
|:---|:---|:---|:---|
|fill
|area path internal color
|string (rgb, hex, hsl...)
|#6eadc1
|
|axisXLaneHeight
|lane height of the axis x
|number
|35
|
|axisYLaneWidth
|lane width of the axis y
|number
|60
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number
|1
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|circleRadius
|emphasis circle radius
|number
|5
|
|groupedAreaTitle
|emphasis circle tooltip
|function
|d => d.value
|
|crossWidth
|legend cross line edge width
|number
|2
|
|crossColor
|legend cross line color
|string (rgb, hex, rgba, hsl...)
|white
|
|curve
|curve algorithm
|string
|curveLinear
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXInterval
|used when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)
|number OR null
|null
|
|axisXTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|true
|
|axisXGroupLabelLaneHeight
|group lane height
|number
|20
|
|axisXGroupLabelFillColorOpacity
|group legend internal color opacity
|number
|1
|
|axisXGroupLabelBorderColorOpacity
|group legend edge color opacity
|number
|0.6
|
|axisXGroupLabelGap
|group legend gap
|number
|10
|
Flow Of Transitions
###d3SankeyCircular
This component is for showing the flow of transitions between zones. It takes an array nodes
to represent all the zones, and it takes an array of elements
like:
{
source: `String`,
target: `String`,
value: 'Number'
}
template
<d3-sankey-circular
:nodes="nodes"
:links="links"
:options="options"
:nodeTitle="nodeTitle"
:linkTitle="linkTitle"
@max-period-updated="(period) => yourMethod(period)"
width="100%"
height="300px">
</d3-sankey-circular>
nodeTitle
Tooltip of zone. Default to d => ${d.name}<br>${d.value}
.
linkTitle
Tooltip of link. Default to d => ${d.source.name} → ${d.target.name}<br>${d.value}
.
options
|key|description|type|default|
|:---|:---|:---|:---|
|nodeWidth
|node width
|number
|20
|
|nodeTextFontSize
|node text font size
|number
|12
|
|nodeTextFontWeight
|node text font weight
|number
|600
|
|nodeTextFontOpacity
|node text font opacity
|number
|1
|
|circularLinkGap
|circular link gap
|number
|4
|
|circularLinkColor
|circularLinkColor
|string (rgb, hex, rgba, hsl...)
|red
|
|linkColor
|link color
|string (rgb, hex, rgba, hsl...)
|black
|
|gapLength
|gap length
|number
|150
|
|arrowLength
|arrow length
|number
|10
|
|arrowHeadSize
|arrow head size
|number
|4
|
|axisXSelectBoxLabel
|select box label
|string
|Max interval among the same trajectory
|
|axisXSelectBoxLabelFontSize
|select box label font size
|number
|12
|
|axisXSelectBoxLabelFontWeight
|select box label font weight
|number
|400
|
|axisXSelectBoxLabelFontOpacity
|select box label font opacity
|number
|0.5
|
|axisXLabel
|label of axis x
|string OR null
|null
|
|axisXLabelFontSize
|label font size of axis x
|number
|14
|
|axisXLabelFontWeight
|label font weight of axis x
|number
|600
|
|axisXLabelFontOpacity
|label font opacity
|number
|1
|
Time Series
###d3Timelion
This component is similar to kibana timelion
with a interval select box. It accepts an array of elements like { key : 'Date', value: 'Number'}
.
template
<d3-timelion
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px"
@range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
@interval-updated="interval => fetchDataWithInterval(interval)">
</d3-timelion>
options
|key|description|type|default|
|:---|:---|:---|:---|
|fill
|bar internal color
|string (rgb, hex, hsl...)
|#6eadc1
|
|stroke
|bar edge color
|string (rgb, hex, hsl...)
|#6eadc1
|
|fillOpacity
|bar internal color opacity
|number
|0.6
|
|strokeOpacity
|bar edge color opacity
|number
|1
|
|barTitle
|tooltip
|function
|d => d.value
|
|tickSize
|tick height/width of axis
|number
|10
|
|tickPadding
|tick padding
|number
|8
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisYLabel
|label of axis y
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|axisXLaneHeight
|lane height of axis x
|number
|60
|
|axisYLaneWidth
|lane width of axis y
|number
|60
|
|axisXInterval
|used when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)
|number OR null
|null
|
|isAxisPathShow
|if the axis path will be shown
|boolean
|true
|
|isAxisTickShow
|if the axis tick will be shown
|boolean
|true
|
|animationDuration
|duration of animation
|number
|1000
|
|delay
|delay of animation (milliseconds)
|number
|50
|
|axisYTickFormat
|d3-format support
|string
|.2s
|
|negative
|the axis y should start at 0 or not
|boolean
|false
|
|nice
|the tick number of axis should be rounded or not
|boolean
|false
|
|timeRangeLabelFontSize
|time range label font size
|number
|12
|
|timeRangeLabelFontWeight
|time range label font weight
|number
|400
|
|timeRangeLabelFontOpacity
|time range label font opacity
|number
|0.5
|
|yAxisRuler
|if the ruler of the axis y should be enabled
|boolean
|true
|
events
|event|description|arguments|
|:---|:---|:---|
|range-updated
|user has chosen a new time range by using the brush
|(dateTimeStart, dateTimeEnd)
|
|interval-updated
|user has changed the time interval by using the select box
|(interval)
|
###d3Timeline
This component is for showing time entries. We have two type entries in d3Timeline
, they are Point
and Interval
. It takes an array of entries as data.
To specify an entry Point
:
{
at: 'Date',
// tooltip
title: 'String',
group: 'String',
// internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'
// you can also specify your own class and add it to SPA. The class shouldn't be in scoped style
className: 'String',
// it supports 7 symbols, they are 'symbolCircle', 'symbolCross', 'symbolDiamond', 'symbolSquare', 'symbolStar', 'symbolTriangle', 'symbolWye'
symbol: 'String'
}
To specify an entry 'Interval':
{
from : 'Date',
to: 'Date',
// tooltip
title: 'String',
label: 'String',
group: 'String',
// internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'
// you can also specify your own class and add it to SPA. The class shouldn't be in scoped style
className: 'String'
}
template
<d3-timeline
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px"
@range-updated="(dateTimeStart, dateTimeEnd) => yourMethod(dateTimeStart, dateTimeEnd)">
</d3-timeline>
options
|key|description|type|default|
|:---|:---|:---|:---|
|intervalCornerRadius
|corner radius of Interval entry
|number
|4
|
|symbolSize
|symbol size of Point entry
|number
|400
|
|groupLabelFontSize
|group label font size
|number
|12
|
|groupLabelFontWeight
|group label font weight
|number
|400
|
|groupLabelFontOpacity
|group label font opacity
|number
|1
|
|groupLaneWidth
|group lane width
|number
|200
|
|tickSize
|tick size of axis
|number
|10
|
|tickPadding
|tick size padding
|number
|8
|
|axisXLaneHeight
|lane height of axis x
|number
|40
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisLabelFontSize
|label font size
|number
|14
|
|axisLabelFontWeight
|label font weight
|number
|600
|
|axisLabelFontOpacity
|label font opacity
|number
|1
|
|backgroundColor
|background color
|string (rgb, hex, rgba, hsl...)
|rgba(255, 255, 255, 0.125)
|
|borderRadius
|border radius
|number
|0
|
|borderWidth
|border width
|number
|2
|
|borderColor
|border color
|string (rgb, hex, rgba, hsl...)
|rgba(0, 0, 0, .125)
|
|boundingLineWidth
|bounding line width
|number
|2
|
|boundingLineColor
|bounding line color
|string (rgb, hex, rgba, hesl...)
|rgba(0, 0, 0, .125)
|
|currentTimeLineWidth
|current time line width
|number
|2
|
|currentTimeLineColor
|current time line color
|string (rgb, hex, rgba, hsl...)
|rgba(255, 56, 96, 1)
|
|liveTimer
|if live timer reference line should be enabled
|boolean
|true
|
|liveTimerTick
|live time reference line move interval
|number (unit: ms)
|250
|
|scaleExtent
|the zoom range
|Array
|[0.5, Infinity]
|
events
|event|description|arguments|
|:---|:---|:---|
|range-updated
|new range selected
|(dateTimeStart, dateTimeEnd)
|
Functional
###d3Player
This component is like d3Timeline
. The difference is that d3Player
has no support for group and is designed to simulate trajectories and to replay trajectories,
. It will also trigger an event to tell us the dateTime of the cursor and the entries it is now passing.
template
<d3-player
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px"
@range-updated="(dateTimeStart, dateTimeEnd) => yourMethod(dateTimeStart, dateTimeEnd)"
@reference-updated="(dateTimeRange, entries) => yourMethod(dateTimeRange, entries)">
</d3-player>
options
|key|description|type|default|
|:---|:---|:---|:---|
|intervalCornerRadius
|corner radius of Interval entry
|number
|4
|
|symbolSize
|symbol size of Point entry
|number
|400
|
|tickSize
|tick size of axis
|number
|10
|
|tickPadding
|tick size padding
|number
|8
|
|axisXLaneHeight
|lane height of axis x
|number
|40
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
|backgroundColor
|background color
|string (rgb, hex, rgba, hsl...)
|rgba(255, 255, 255, 0.125)
|
|borderRadius
|border radius
|number
|0
|
|borderWidth
|border width
|number
|2
|
|borderColor
|border color
|string (rgb, hex, rgba, hsl...)
|rgba(0, 0, 0, .125)
|
|boundingLineWidth
|bounding line width
|number
|2
|
|boundingLineColor
|bounding line color
|string (rgb, hex, rgba, hesl...)
|rgba(0, 0, 0, .125)
|
|referenceLineWidth
|reference time line width
|number
|4
|
|referenceLineColor
|reference time line color
|string (rgb, hex, rgba, hsl...)
|rgba(255, 56, 96, 1)
|
|overlayWidth
|cursor overlay rectangle width
|number
|30
|
events
|event|description|arguments|
|:---|:---|:---|
|reference-updated
|reference cursor move
|(dateTimeRange, entries)
|
|range-updated
|new range selected
|(dateTimeStart, dateTimeEnd)
|
###d3HorizontalSlider
This component is make it more simple to choose a value in a range. This range can be a range of color, date or number. It takes a min
and max
as data.
template
<d3-horizontal-slider
:min="min"
:max="max"
:margin="margin"
:options="options"
@input="(val) => yourMethod(val)"
width="100%"
height="100%">
</d3-horizontal-slider>
options
|key|description|type|default|
|:---|:---|:---|:---|
|trackStroke
|track edge color
|string (rgb, hex, rgba, hsl...)
|#000
|
|trackStrokeWidth
|track edge width
|number
|10
|
|trackStrokeOpacity
|track edge opacity
|number
|0.3
|
|trackRounded
|track round or not
|boolean
|true
|
|trackInsetStroke
|inset track edge color
|string (rgb, hex, rgba, hsl...)
|#ddd
|
|trackInsetStrokeOpacity
|inset track edge color opacity
|number
|1
|
|trackInsetStrokeWidth
|inset track edge width
|number
|8
|
|circleFill
|circle handler internal color
|string (rgb, hex, rgba, hsl...)
|#fff
|
|circleStroke
|circle handler edge color
|string (rgb, hex, rgba, hsl...)
|#000
|
|circleStrokeOpacity
|circle handler edge color opacity
|number
|0.5
|
|circleStrokeWidth
|circle handler edge width
|number
|1.25
|
###d3VerticalSlider
This component is make it more simple to choose a value in a range. This range can be a range of color, date or number. It takes a min
and max
as data.
template
<d3-vertical-slider
:min="min"
:max="max"
:margin="margin"
:options="options"
@input="(val) => yourMethod(val)"
width="100%"
height="100%">
</d3-vertical-slider>
options
|key|description|type|default|
|:---|:---|:---|:---|
|trackStroke
|track edge color
|string (rgb, hex, rgba, hsl...)
|#000
|
|trackStrokeWidth
|track edge width
|number
|10
|
|trackStrokeOpacity
|track edge opacity
|number
|0.3
|
|trackRounded
|track round or not
|boolean
|true
|
|trackInsetStroke
|inset track edge color
|string (rgb, hex, rgba, hsl...)
|#ddd
|
|trackInsetStrokeOpacity
|inset track edge color opacity
|number
|1
|
|trackInsetStrokeWidth
|inset track edge width
|number
|8
|
|circleFill
|circle handler internal color
|string (rgb, hex, rgba, hsl...)
|#fff
|
|circleStroke
|circle handler edge color
|string (rgb, hex, rgba, hsl...)
|#000
|
|circleStrokeOpacity
|circle handler edge color opacity
|number
|0.5
|
|circleStrokeWidth
|circle handler edge width
|number
|1.25
|
Layout
###d3Tree
This component is for showing tree
layout which is recursive. It takes an object of Hierarchical layouts
as data.
hierarchical layout object
{
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
}
template
<d3-tree
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-tree>
options
|key|description|type|default|
|:---|:---|:---|:---|
|nodeTitle
|tooltip
|function
|d => d.data.key + '<br>' + 'd.data.value'
|
|nodeFill
|tree node internal color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|nodeStroke
|tree node edge color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|nodeFillOpacity
|tree node internal color opacity
|number
|0.6
|
|nodeStrokeOpacity
|tree node edge color opacity
|number
|1
|
|linkStroke
|link edge color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|linkStrokeWidth
|link edge width
|number
|1
|
|linkStrokeOpacity
|link edge color opacity
|number
|1
|
|nodeRadius
|tree node circle radius
|number
|10
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
###d3Cluster
This component is like d3-tree
but with all leaf nodes are at the same height. It takes an object of Hierarchical layouts
as data.
hierarchical layout object
{
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
}
template
<d3-cluster
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-cluster>
options
|key|description|type|default|
|:---|:---|:---|:---|
|nodeTitle
|tooltip
|function
|d => d.data.name + '<br>' + 'd.data.value'
|
|nodeFill
|tree node internal color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|nodeStroke
|tree node edge color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|nodeFillOpacity
|tree node internal color opacity
|number
|0.6
|
|nodeStrokeOpacity
|tree node edge color opacity
|number
|1
|
|linkStroke
|link edge color
|string (rgb, hex, rgba, hsl...)
|#6eadc1
|
|linkStrokeWidth
|link edge width
|number
|1
|
|linkStrokeOpacity
|link edge color opacity
|number
|1
|
|nodeRadius
|tree node circle radius
|number
|10
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
###d3ICicleHorizontal
This component is for show icicle horizontal
layout which is recursive. It takes an object of Hierarchical layouts
as data.
template
<d3-icicle-horizontal
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-icicle-horizontal>
options
|key|description|type|default|
|:---|:---|:---|:---|
|rectTitle
|tooltip
|function
|d => d.data.value
|
|padding
|partition padding
|number
|0
|
|fillOpacity
|partition internal color opacity
|number
|0.6
|
|strokeOpacity
|partition edge color opacity
|number
|1
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
###d3ICicleVertical
This component is for show icicle vertical
layout which is recursive. It takes an object of Hierarchical layouts
as data.
template
<d3-icicle-vertical
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-icicle-vertical>
options
|key|description|type|default|
|:---|:---|:---|:---|
|rectTitle
|tooltip
|function
|d => d.data.value
|
|padding
|partition padding
|number
|0
|
|fillOpacity
|partition internal color opacity
|number
|0.6
|
|strokeOpacity
|partition edge color opacity
|number
|1
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
###d3Sunburst
This component is for showing sunburst
layout. It takes an object of Hierarchical layouts
as data.
hierarchical layout object
{
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
}
template
<d3-sunburst
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-sunburst>
options
|key|description|type|default|
|:---|:---|:---|:---|
|arcTitle
|tooltip
|function
|d => d.data.value
|
|padding
|partition padding
|number
|0
|
|fillOpacity
|partition internal color opacity
|number
|0.6
|
|strokeOpacity
|partition edge color opacity
|number
|1
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
###d3Pack
This component is for showing pack
layout. It takes an object of Hierarchical layouts
as data.
hierarchical layout object
{
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
}
template
<d3-pack
:data="data"
:options="options"
:margin="margin"
width="100%"
height="300px">
</d3-pack>
options
|key|description|type|default|
|:---|:---|:---|:---|
|circleTitle
|tooltip
|function
|d => d.data.key + '<br>' + d.data.value
|
|circleFillOpacity
|partition circle internal color opacity
|number
|0.6
|
|circleStrokeOpacity
|partition circle edge color opacity
|number
|1
|
|axisXLabel
|label of axis x
|string or null
|null
|
|axisFontSize
|axis text font size
|number
|12
|
|axisFontWeight
|axis text font weight
|number
|400
|
|axisFontOpacity
|axis text font opacity
|number ([0, 1])
|0.5
|
ToDo
d3ColorPicker
d3Gantt
d3Gauge
d3Goal
d3HeatMap
d3RadialBar
d3RadialSector
d3RadialLine
d3ScatterPlot
d3Table
d3WordCloud
d3Markdown
d3JsonViewer
d3LReplay
License
MIT