Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
c3-closed
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
charts
c3-closed
Commits
a6ab889a
Commit
a6ab889a
authored
Aug 17, 2014
by
Masayuki Tanaka
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Modularize api.flow
parent
adbfd488
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
312 additions
and
248 deletions
+312
-248
c3.js
c3.js
+156
-124
c3.min.js
c3.min.js
+0
-0
api.flow.js
src/api.flow.js
+140
-0
core.js
src/core.js
+16
-124
No files found.
c3.js
View file @
a6ab889a
...
@@ -407,7 +407,8 @@
...
@@ -407,7 +407,8 @@
var
withY
,
withSubchart
,
withTransition
,
withTransitionForExit
,
withTransitionForAxis
,
withTransform
,
withUpdateXDomain
,
withUpdateOrgXDomain
,
withLegend
;
var
withY
,
withSubchart
,
withTransition
,
withTransitionForExit
,
withTransitionForAxis
,
withTransform
,
withUpdateXDomain
,
withUpdateOrgXDomain
,
withLegend
;
var
hideAxis
=
$$
.
hasArcType
();
var
hideAxis
=
$$
.
hasArcType
();
var
drawArea
,
drawBar
,
drawLine
,
xForText
,
yForText
;
var
drawArea
,
drawBar
,
drawLine
,
xForText
,
yForText
;
var
duration
,
durationForExit
,
durationForAxis
,
waitForDraw
;
var
duration
,
durationForExit
,
durationForAxis
;
var
waitForDraw
,
flow
;
var
targetsToShow
=
$$
.
filterTargetsToShow
(
$$
.
data
.
targets
),
tickValues
,
i
,
intervalForCulling
;
var
targetsToShow
=
$$
.
filterTargetsToShow
(
$$
.
data
.
targets
),
tickValues
,
i
,
intervalForCulling
;
var
xv
=
$$
.
xv
.
bind
(
$$
),
var
xv
=
$$
.
xv
.
bind
(
$$
),
cx
=
(
$$
.
config
[
__axis_rotated
]
?
$$
.
circleY
:
$$
.
circleX
).
bind
(
$$
),
cx
=
(
$$
.
config
[
__axis_rotated
]
?
$$
.
circleY
:
$$
.
circleX
).
bind
(
$$
),
...
@@ -568,131 +569,22 @@
...
@@ -568,131 +569,22 @@
transitions
.
forEach
(
function
(
t
)
{
transitions
.
forEach
(
function
(
t
)
{
waitForDraw
.
add
(
t
);
waitForDraw
.
add
(
t
);
});
});
flow
=
$$
.
generateFlow
({
targets
:
targetsToShow
,
flow
:
options
.
flow
,
duration
:
duration
,
drawBar
:
drawBar
,
drawLine
:
drawLine
,
drawArea
:
drawArea
,
cx
:
cx
,
cy
:
cy
,
xv
:
xv
,
xForText
:
xForText
,
yForText
:
yForText
});
}
}
})
})
.
call
(
waitForDraw
?
waitForDraw
:
function
()
{},
function
()
{
// only for flow
.
call
(
waitForDraw
||
function
()
{},
flow
||
function
()
{});
var
translateX
,
scaleX
=
1
,
transform
,
flowIndex
=
options
.
flow
.
index
,
flowLength
=
options
.
flow
.
length
,
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
),
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
+
flowLength
),
orgDomain
=
$$
.
x
.
domain
(),
domain
,
durationForFlow
=
options
.
flow
.
duration
||
duration
,
done
=
options
.
flow
.
done
||
function
()
{},
wait
=
$$
.
generateWait
();
var
xgrid
=
$$
.
xgrid
||
d3
.
selectAll
([]),
xgridLines
=
$$
.
xgridLines
||
d3
.
selectAll
([]),
mainRegion
=
$$
.
mainRegion
||
d3
.
selectAll
([]),
mainText
=
$$
.
mainText
||
d3
.
selectAll
([]),
mainBar
=
$$
.
mainBar
||
d3
.
selectAll
([]),
mainLine
=
$$
.
mainLine
||
d3
.
selectAll
([]),
mainArea
=
$$
.
mainArea
||
d3
.
selectAll
([]),
mainCircle
=
$$
.
mainCircle
||
d3
.
selectAll
([]);
// remove head data after rendered
$$
.
data
.
targets
.
forEach
(
function
(
d
)
{
d
.
values
.
splice
(
0
,
flowLength
);
});
// update x domain to generate axis elements for flow
domain
=
$$
.
updateXDomain
(
targetsToShow
,
true
,
true
);
// update elements related to x scale
if
(
$$
.
updateXGrid
)
{
$$
.
updateXGrid
(
true
);
}
// generate transform to flow
if
(
!
options
.
flow
.
orgDataCount
)
{
// if empty
if
(
$$
.
data
.
targets
[
0
].
values
.
length
!==
1
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
0
);
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
$$
.
data
.
targets
[
0
].
values
.
length
-
1
);
translateX
=
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
);
}
else
{
translateX
=
diffDomain
(
domain
)
/
2
;
}
}
}
else
if
(
options
.
flow
.
orgDataCount
===
1
||
flowStart
.
x
===
flowEnd
.
x
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
translateX
=
(
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]));
}
else
{
translateX
=
(
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
));
}
}
scaleX
=
(
diffDomain
(
orgDomain
)
/
diffDomain
(
domain
));
transform
=
'translate('
+
translateX
+
',0) scale('
+
scaleX
+
',1)'
;
d3
.
transition
().
ease
(
'linear'
).
duration
(
durationForFlow
).
each
(
function
()
{
wait
.
add
(
$$
.
axes
.
x
.
transition
().
call
(
$$
.
xAxis
));
wait
.
add
(
mainBar
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainLine
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainArea
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainCircle
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainText
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainRegion
.
filter
(
$$
.
isRegionOnX
).
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgrid
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgridLines
.
transition
().
attr
(
'transform'
,
transform
));
})
.
call
(
wait
,
function
()
{
var
i
,
shapes
=
[],
texts
=
[],
eventRects
=
[];
// remove flowed elements
if
(
flowLength
)
{
for
(
i
=
0
;
i
<
flowLength
;
i
++
)
{
shapes
.
push
(
'.'
+
CLASS
[
_shape
]
+
'-'
+
(
flowIndex
+
i
));
texts
.
push
(
'.'
+
CLASS
[
_text
]
+
'-'
+
(
flowIndex
+
i
));
eventRects
.
push
(
'.'
+
CLASS
[
_eventRect
]
+
'-'
+
(
flowIndex
+
i
));
}
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_shapes
]).
selectAll
(
shapes
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_texts
]).
selectAll
(
texts
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_eventRects
]).
selectAll
(
eventRects
).
remove
();
$$
.
svg
.
select
(
'.'
+
CLASS
[
_xgrid
]).
remove
();
}
// draw again for removing flowed elements and reverting attr
xgrid
.
attr
(
'transform'
,
null
)
.
attr
(
$$
.
xgridAttr
);
xgridLines
.
attr
(
'transform'
,
null
);
xgridLines
.
select
(
'line'
)
.
attr
(
"x1"
,
config
[
__axis_rotated
]
?
0
:
xv
)
.
attr
(
"x2"
,
config
[
__axis_rotated
]
?
$$
.
width
:
xv
);
xgridLines
.
select
(
'text'
)
.
attr
(
"x"
,
config
[
__axis_rotated
]
?
$$
.
width
:
0
)
.
attr
(
"y"
,
xv
);
mainBar
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawBar
);
mainLine
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawLine
);
mainArea
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawArea
);
mainCircle
.
attr
(
'transform'
,
null
)
.
attr
(
"cx"
,
cx
)
.
attr
(
"cy"
,
cy
);
mainText
.
attr
(
'transform'
,
null
)
.
attr
(
'x'
,
xForText
)
.
attr
(
'y'
,
yForText
)
.
style
(
'fill-opacity'
,
$$
.
opacityForText
.
bind
(
$$
));
mainRegion
.
attr
(
'transform'
,
null
);
mainRegion
.
select
(
'rect'
).
filter
(
$$
.
isRegionOnX
)
.
attr
(
"x"
,
$$
.
regionX
.
bind
(
$$
))
.
attr
(
"width"
,
$$
.
regionWidth
.
bind
(
$$
));
$$
.
updateEventRect
();
// callback for end of flow
done
();
});
});
// update fadein condition
// update fadein condition
$$
.
mapToIds
(
$$
.
data
.
targets
).
forEach
(
function
(
id
)
{
$$
.
mapToIds
(
$$
.
data
.
targets
).
forEach
(
function
(
id
)
{
...
@@ -5820,6 +5712,146 @@
...
@@ -5820,6 +5712,146 @@
});
});
};
};
c3_chart_internal_fn
.
generateFlow
=
function
(
args
)
{
var
$$
=
this
,
config
=
$$
.
config
,
d3
=
$$
.
d3
,
CLASS
=
$$
.
CLASS
;
return
function
()
{
var
targets
=
args
.
targets
,
flow
=
args
.
flow
,
drawBar
=
args
.
drawBar
,
drawLine
=
args
.
drawLine
,
drawArea
=
args
.
drawArea
,
cx
=
args
.
cx
,
cy
=
args
.
cy
,
xv
=
args
.
xv
,
xForText
=
args
.
xForText
,
yForText
=
args
.
yForText
,
duration
=
args
.
duration
;
var
translateX
,
scaleX
=
1
,
transform
,
flowIndex
=
flow
.
index
,
flowLength
=
flow
.
length
,
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
),
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
+
flowLength
),
orgDomain
=
$$
.
x
.
domain
(),
domain
,
durationForFlow
=
flow
.
duration
||
duration
,
done
=
flow
.
done
||
function
()
{},
wait
=
$$
.
generateWait
();
var
xgrid
=
$$
.
xgrid
||
d3
.
selectAll
([]),
xgridLines
=
$$
.
xgridLines
||
d3
.
selectAll
([]),
mainRegion
=
$$
.
mainRegion
||
d3
.
selectAll
([]),
mainText
=
$$
.
mainText
||
d3
.
selectAll
([]),
mainBar
=
$$
.
mainBar
||
d3
.
selectAll
([]),
mainLine
=
$$
.
mainLine
||
d3
.
selectAll
([]),
mainArea
=
$$
.
mainArea
||
d3
.
selectAll
([]),
mainCircle
=
$$
.
mainCircle
||
d3
.
selectAll
([]);
// remove head data after rendered
$$
.
data
.
targets
.
forEach
(
function
(
d
)
{
d
.
values
.
splice
(
0
,
flowLength
);
});
// update x domain to generate axis elements for flow
domain
=
$$
.
updateXDomain
(
targets
,
true
,
true
);
// update elements related to x scale
if
(
$$
.
updateXGrid
)
{
$$
.
updateXGrid
(
true
);
}
// generate transform to flow
if
(
!
flow
.
orgDataCount
)
{
// if empty
if
(
$$
.
data
.
targets
[
0
].
values
.
length
!==
1
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
0
);
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
$$
.
data
.
targets
[
0
].
values
.
length
-
1
);
translateX
=
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
);
}
else
{
translateX
=
diffDomain
(
domain
)
/
2
;
}
}
}
else
if
(
flow
.
orgDataCount
===
1
||
flowStart
.
x
===
flowEnd
.
x
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
translateX
=
(
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]));
}
else
{
translateX
=
(
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
));
}
}
scaleX
=
(
diffDomain
(
orgDomain
)
/
diffDomain
(
domain
));
transform
=
'translate('
+
translateX
+
',0) scale('
+
scaleX
+
',1)'
;
d3
.
transition
().
ease
(
'linear'
).
duration
(
durationForFlow
).
each
(
function
()
{
wait
.
add
(
$$
.
axes
.
x
.
transition
().
call
(
$$
.
xAxis
));
wait
.
add
(
mainBar
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainLine
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainArea
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainCircle
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainText
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainRegion
.
filter
(
$$
.
isRegionOnX
).
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgrid
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgridLines
.
transition
().
attr
(
'transform'
,
transform
));
})
.
call
(
wait
,
function
()
{
var
i
,
shapes
=
[],
texts
=
[],
eventRects
=
[];
// remove flowed elements
if
(
flowLength
)
{
for
(
i
=
0
;
i
<
flowLength
;
i
++
)
{
shapes
.
push
(
'.'
+
CLASS
[
_shape
]
+
'-'
+
(
flowIndex
+
i
));
texts
.
push
(
'.'
+
CLASS
[
_text
]
+
'-'
+
(
flowIndex
+
i
));
eventRects
.
push
(
'.'
+
CLASS
[
_eventRect
]
+
'-'
+
(
flowIndex
+
i
));
}
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_shapes
]).
selectAll
(
shapes
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_texts
]).
selectAll
(
texts
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_eventRects
]).
selectAll
(
eventRects
).
remove
();
$$
.
svg
.
select
(
'.'
+
CLASS
[
_xgrid
]).
remove
();
}
// draw again for removing flowed elements and reverting attr
xgrid
.
attr
(
'transform'
,
null
)
.
attr
(
$$
.
xgridAttr
);
xgridLines
.
attr
(
'transform'
,
null
);
xgridLines
.
select
(
'line'
)
.
attr
(
"x1"
,
config
[
__axis_rotated
]
?
0
:
xv
)
.
attr
(
"x2"
,
config
[
__axis_rotated
]
?
$$
.
width
:
xv
);
xgridLines
.
select
(
'text'
)
.
attr
(
"x"
,
config
[
__axis_rotated
]
?
$$
.
width
:
0
)
.
attr
(
"y"
,
xv
);
mainBar
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawBar
);
mainLine
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawLine
);
mainArea
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawArea
);
mainCircle
.
attr
(
'transform'
,
null
)
.
attr
(
"cx"
,
cx
)
.
attr
(
"cy"
,
cy
);
mainText
.
attr
(
'transform'
,
null
)
.
attr
(
'x'
,
xForText
)
.
attr
(
'y'
,
yForText
)
.
style
(
'fill-opacity'
,
$$
.
opacityForText
.
bind
(
$$
));
mainRegion
.
attr
(
'transform'
,
null
);
mainRegion
.
select
(
'rect'
).
filter
(
$$
.
isRegionOnX
)
.
attr
(
"x"
,
$$
.
regionX
.
bind
(
$$
))
.
attr
(
"width"
,
$$
.
regionWidth
.
bind
(
$$
));
$$
.
updateEventRect
();
// callback for end of flow
done
();
});
};
};
c3_chart_fn
.
selected
=
function
(
targetId
)
{
c3_chart_fn
.
selected
=
function
(
targetId
)
{
var
$$
=
this
.
internal
,
d3
=
$$
.
d3
;
var
$$
=
this
.
internal
,
d3
=
$$
.
d3
;
return
d3
.
merge
(
return
d3
.
merge
(
...
...
c3.min.js
View file @
a6ab889a
This source diff could not be displayed because it is too large. You can
view the blob
instead.
src/api.flow.js
View file @
a6ab889a
...
@@ -138,3 +138,143 @@ c3_chart_fn.flow = function (args) {
...
@@ -138,3 +138,143 @@ c3_chart_fn.flow = function (args) {
withTransition
:
orgDataCount
>
1
,
withTransition
:
orgDataCount
>
1
,
});
});
};
};
c3_chart_internal_fn
.
generateFlow
=
function
(
args
)
{
var
$$
=
this
,
config
=
$$
.
config
,
d3
=
$$
.
d3
,
CLASS
=
$$
.
CLASS
;
return
function
()
{
var
targets
=
args
.
targets
,
flow
=
args
.
flow
,
drawBar
=
args
.
drawBar
,
drawLine
=
args
.
drawLine
,
drawArea
=
args
.
drawArea
,
cx
=
args
.
cx
,
cy
=
args
.
cy
,
xv
=
args
.
xv
,
xForText
=
args
.
xForText
,
yForText
=
args
.
yForText
,
duration
=
args
.
duration
;
var
translateX
,
scaleX
=
1
,
transform
,
flowIndex
=
flow
.
index
,
flowLength
=
flow
.
length
,
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
),
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
+
flowLength
),
orgDomain
=
$$
.
x
.
domain
(),
domain
,
durationForFlow
=
flow
.
duration
||
duration
,
done
=
flow
.
done
||
function
()
{},
wait
=
$$
.
generateWait
();
var
xgrid
=
$$
.
xgrid
||
d3
.
selectAll
([]),
xgridLines
=
$$
.
xgridLines
||
d3
.
selectAll
([]),
mainRegion
=
$$
.
mainRegion
||
d3
.
selectAll
([]),
mainText
=
$$
.
mainText
||
d3
.
selectAll
([]),
mainBar
=
$$
.
mainBar
||
d3
.
selectAll
([]),
mainLine
=
$$
.
mainLine
||
d3
.
selectAll
([]),
mainArea
=
$$
.
mainArea
||
d3
.
selectAll
([]),
mainCircle
=
$$
.
mainCircle
||
d3
.
selectAll
([]);
// remove head data after rendered
$$
.
data
.
targets
.
forEach
(
function
(
d
)
{
d
.
values
.
splice
(
0
,
flowLength
);
});
// update x domain to generate axis elements for flow
domain
=
$$
.
updateXDomain
(
targets
,
true
,
true
);
// update elements related to x scale
if
(
$$
.
updateXGrid
)
{
$$
.
updateXGrid
(
true
);
}
// generate transform to flow
if
(
!
flow
.
orgDataCount
)
{
// if empty
if
(
$$
.
data
.
targets
[
0
].
values
.
length
!==
1
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
0
);
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
$$
.
data
.
targets
[
0
].
values
.
length
-
1
);
translateX
=
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
);
}
else
{
translateX
=
diffDomain
(
domain
)
/
2
;
}
}
}
else
if
(
flow
.
orgDataCount
===
1
||
flowStart
.
x
===
flowEnd
.
x
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
translateX
=
(
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]));
}
else
{
translateX
=
(
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
));
}
}
scaleX
=
(
diffDomain
(
orgDomain
)
/
diffDomain
(
domain
));
transform
=
'translate('
+
translateX
+
',0) scale('
+
scaleX
+
',1)'
;
d3
.
transition
().
ease
(
'linear'
).
duration
(
durationForFlow
).
each
(
function
()
{
wait
.
add
(
$$
.
axes
.
x
.
transition
().
call
(
$$
.
xAxis
));
wait
.
add
(
mainBar
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainLine
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainArea
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainCircle
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainText
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainRegion
.
filter
(
$$
.
isRegionOnX
).
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgrid
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgridLines
.
transition
().
attr
(
'transform'
,
transform
));
})
.
call
(
wait
,
function
()
{
var
i
,
shapes
=
[],
texts
=
[],
eventRects
=
[];
// remove flowed elements
if
(
flowLength
)
{
for
(
i
=
0
;
i
<
flowLength
;
i
++
)
{
shapes
.
push
(
'.'
+
CLASS
[
_shape
]
+
'-'
+
(
flowIndex
+
i
));
texts
.
push
(
'.'
+
CLASS
[
_text
]
+
'-'
+
(
flowIndex
+
i
));
eventRects
.
push
(
'.'
+
CLASS
[
_eventRect
]
+
'-'
+
(
flowIndex
+
i
));
}
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_shapes
]).
selectAll
(
shapes
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_texts
]).
selectAll
(
texts
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_eventRects
]).
selectAll
(
eventRects
).
remove
();
$$
.
svg
.
select
(
'.'
+
CLASS
[
_xgrid
]).
remove
();
}
// draw again for removing flowed elements and reverting attr
xgrid
.
attr
(
'transform'
,
null
)
.
attr
(
$$
.
xgridAttr
);
xgridLines
.
attr
(
'transform'
,
null
);
xgridLines
.
select
(
'line'
)
.
attr
(
"x1"
,
config
[
__axis_rotated
]
?
0
:
xv
)
.
attr
(
"x2"
,
config
[
__axis_rotated
]
?
$$
.
width
:
xv
);
xgridLines
.
select
(
'text'
)
.
attr
(
"x"
,
config
[
__axis_rotated
]
?
$$
.
width
:
0
)
.
attr
(
"y"
,
xv
);
mainBar
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawBar
);
mainLine
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawLine
);
mainArea
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawArea
);
mainCircle
.
attr
(
'transform'
,
null
)
.
attr
(
"cx"
,
cx
)
.
attr
(
"cy"
,
cy
);
mainText
.
attr
(
'transform'
,
null
)
.
attr
(
'x'
,
xForText
)
.
attr
(
'y'
,
yForText
)
.
style
(
'fill-opacity'
,
$$
.
opacityForText
.
bind
(
$$
));
mainRegion
.
attr
(
'transform'
,
null
);
mainRegion
.
select
(
'rect'
).
filter
(
$$
.
isRegionOnX
)
.
attr
(
"x"
,
$$
.
regionX
.
bind
(
$$
))
.
attr
(
"width"
,
$$
.
regionWidth
.
bind
(
$$
));
$$
.
updateEventRect
();
// callback for end of flow
done
();
});
};
};
src/core.js
View file @
a6ab889a
...
@@ -402,7 +402,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
...
@@ -402,7 +402,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
var
withY
,
withSubchart
,
withTransition
,
withTransitionForExit
,
withTransitionForAxis
,
withTransform
,
withUpdateXDomain
,
withUpdateOrgXDomain
,
withLegend
;
var
withY
,
withSubchart
,
withTransition
,
withTransitionForExit
,
withTransitionForAxis
,
withTransform
,
withUpdateXDomain
,
withUpdateOrgXDomain
,
withLegend
;
var
hideAxis
=
$$
.
hasArcType
();
var
hideAxis
=
$$
.
hasArcType
();
var
drawArea
,
drawBar
,
drawLine
,
xForText
,
yForText
;
var
drawArea
,
drawBar
,
drawLine
,
xForText
,
yForText
;
var
duration
,
durationForExit
,
durationForAxis
,
waitForDraw
;
var
duration
,
durationForExit
,
durationForAxis
;
var
waitForDraw
,
flow
;
var
targetsToShow
=
$$
.
filterTargetsToShow
(
$$
.
data
.
targets
),
tickValues
,
i
,
intervalForCulling
;
var
targetsToShow
=
$$
.
filterTargetsToShow
(
$$
.
data
.
targets
),
tickValues
,
i
,
intervalForCulling
;
var
xv
=
$$
.
xv
.
bind
(
$$
),
var
xv
=
$$
.
xv
.
bind
(
$$
),
cx
=
(
$$
.
config
[
__axis_rotated
]
?
$$
.
circleY
:
$$
.
circleX
).
bind
(
$$
),
cx
=
(
$$
.
config
[
__axis_rotated
]
?
$$
.
circleY
:
$$
.
circleX
).
bind
(
$$
),
...
@@ -563,131 +564,22 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
...
@@ -563,131 +564,22 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
transitions
.
forEach
(
function
(
t
)
{
transitions
.
forEach
(
function
(
t
)
{
waitForDraw
.
add
(
t
);
waitForDraw
.
add
(
t
);
});
});
flow
=
$$
.
generateFlow
({
targets
:
targetsToShow
,
flow
:
options
.
flow
,
duration
:
duration
,
drawBar
:
drawBar
,
drawLine
:
drawLine
,
drawArea
:
drawArea
,
cx
:
cx
,
cy
:
cy
,
xv
:
xv
,
xForText
:
xForText
,
yForText
:
yForText
});
}
}
})
})
.
call
(
waitForDraw
?
waitForDraw
:
function
()
{},
function
()
{
// only for flow
.
call
(
waitForDraw
||
function
()
{},
flow
||
function
()
{});
var
translateX
,
scaleX
=
1
,
transform
,
flowIndex
=
options
.
flow
.
index
,
flowLength
=
options
.
flow
.
length
,
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
),
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
flowIndex
+
flowLength
),
orgDomain
=
$$
.
x
.
domain
(),
domain
,
durationForFlow
=
options
.
flow
.
duration
||
duration
,
done
=
options
.
flow
.
done
||
function
()
{},
wait
=
$$
.
generateWait
();
var
xgrid
=
$$
.
xgrid
||
d3
.
selectAll
([]),
xgridLines
=
$$
.
xgridLines
||
d3
.
selectAll
([]),
mainRegion
=
$$
.
mainRegion
||
d3
.
selectAll
([]),
mainText
=
$$
.
mainText
||
d3
.
selectAll
([]),
mainBar
=
$$
.
mainBar
||
d3
.
selectAll
([]),
mainLine
=
$$
.
mainLine
||
d3
.
selectAll
([]),
mainArea
=
$$
.
mainArea
||
d3
.
selectAll
([]),
mainCircle
=
$$
.
mainCircle
||
d3
.
selectAll
([]);
// remove head data after rendered
$$
.
data
.
targets
.
forEach
(
function
(
d
)
{
d
.
values
.
splice
(
0
,
flowLength
);
});
// update x domain to generate axis elements for flow
domain
=
$$
.
updateXDomain
(
targetsToShow
,
true
,
true
);
// update elements related to x scale
if
(
$$
.
updateXGrid
)
{
$$
.
updateXGrid
(
true
);
}
// generate transform to flow
if
(
!
options
.
flow
.
orgDataCount
)
{
// if empty
if
(
$$
.
data
.
targets
[
0
].
values
.
length
!==
1
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
flowStart
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
0
);
flowEnd
=
$$
.
getValueOnIndex
(
$$
.
data
.
targets
[
0
].
values
,
$$
.
data
.
targets
[
0
].
values
.
length
-
1
);
translateX
=
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
);
}
else
{
translateX
=
diffDomain
(
domain
)
/
2
;
}
}
}
else
if
(
options
.
flow
.
orgDataCount
===
1
||
flowStart
.
x
===
flowEnd
.
x
)
{
translateX
=
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]);
}
else
{
if
(
$$
.
isTimeSeries
())
{
translateX
=
(
$$
.
x
(
orgDomain
[
0
])
-
$$
.
x
(
domain
[
0
]));
}
else
{
translateX
=
(
$$
.
x
(
flowStart
.
x
)
-
$$
.
x
(
flowEnd
.
x
));
}
}
scaleX
=
(
diffDomain
(
orgDomain
)
/
diffDomain
(
domain
));
transform
=
'translate('
+
translateX
+
',0) scale('
+
scaleX
+
',1)'
;
d3
.
transition
().
ease
(
'linear'
).
duration
(
durationForFlow
).
each
(
function
()
{
wait
.
add
(
$$
.
axes
.
x
.
transition
().
call
(
$$
.
xAxis
));
wait
.
add
(
mainBar
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainLine
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainArea
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainCircle
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainText
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
mainRegion
.
filter
(
$$
.
isRegionOnX
).
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgrid
.
transition
().
attr
(
'transform'
,
transform
));
wait
.
add
(
xgridLines
.
transition
().
attr
(
'transform'
,
transform
));
})
.
call
(
wait
,
function
()
{
var
i
,
shapes
=
[],
texts
=
[],
eventRects
=
[];
// remove flowed elements
if
(
flowLength
)
{
for
(
i
=
0
;
i
<
flowLength
;
i
++
)
{
shapes
.
push
(
'.'
+
CLASS
[
_shape
]
+
'-'
+
(
flowIndex
+
i
));
texts
.
push
(
'.'
+
CLASS
[
_text
]
+
'-'
+
(
flowIndex
+
i
));
eventRects
.
push
(
'.'
+
CLASS
[
_eventRect
]
+
'-'
+
(
flowIndex
+
i
));
}
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_shapes
]).
selectAll
(
shapes
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_texts
]).
selectAll
(
texts
).
remove
();
$$
.
svg
.
selectAll
(
'.'
+
CLASS
[
_eventRects
]).
selectAll
(
eventRects
).
remove
();
$$
.
svg
.
select
(
'.'
+
CLASS
[
_xgrid
]).
remove
();
}
// draw again for removing flowed elements and reverting attr
xgrid
.
attr
(
'transform'
,
null
)
.
attr
(
$$
.
xgridAttr
);
xgridLines
.
attr
(
'transform'
,
null
);
xgridLines
.
select
(
'line'
)
.
attr
(
"x1"
,
config
[
__axis_rotated
]
?
0
:
xv
)
.
attr
(
"x2"
,
config
[
__axis_rotated
]
?
$$
.
width
:
xv
);
xgridLines
.
select
(
'text'
)
.
attr
(
"x"
,
config
[
__axis_rotated
]
?
$$
.
width
:
0
)
.
attr
(
"y"
,
xv
);
mainBar
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawBar
);
mainLine
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawLine
);
mainArea
.
attr
(
'transform'
,
null
)
.
attr
(
"d"
,
drawArea
);
mainCircle
.
attr
(
'transform'
,
null
)
.
attr
(
"cx"
,
cx
)
.
attr
(
"cy"
,
cy
);
mainText
.
attr
(
'transform'
,
null
)
.
attr
(
'x'
,
xForText
)
.
attr
(
'y'
,
yForText
)
.
style
(
'fill-opacity'
,
$$
.
opacityForText
.
bind
(
$$
));
mainRegion
.
attr
(
'transform'
,
null
);
mainRegion
.
select
(
'rect'
).
filter
(
$$
.
isRegionOnX
)
.
attr
(
"x"
,
$$
.
regionX
.
bind
(
$$
))
.
attr
(
"width"
,
$$
.
regionWidth
.
bind
(
$$
));
$$
.
updateEventRect
();
// callback for end of flow
done
();
});
});
// update fadein condition
// update fadein condition
$$
.
mapToIds
(
$$
.
data
.
targets
).
forEach
(
function
(
id
)
{
$$
.
mapToIds
(
$$
.
data
.
targets
).
forEach
(
function
(
id
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment