Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SPP 2143 Learning Through Connecting
ltc_website
Commits
dfc235d1
Commit
dfc235d1
authored
Sep 21, 2021
by
amarcic
Browse files
clip path: clip zoomed graph on x-axis
parent
88088d03
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/Timeline/TimelineChart.jsx
View file @
dfc235d1
...
...
@@ -38,7 +38,7 @@ export const TimelineChart = (props) => {
drawTimeline
(
timelineData
,
props
.
dimensions
)
},
[
props
.
filteredTimelineData
,
props
.
dimensions
]
);
//todo: still depending on outer scope
for
height, width, margin
//todo:
check if
still depending on outer scope
(like
height, width, margin
)
const
drawTimeline
=
(
timelineConfig
,
dimensions
)
=>
{
const
{
data
,
svgRef
,
xDomain
}
=
timelineConfig
;
...
...
@@ -70,9 +70,22 @@ export const TimelineChart = (props) => {
//add x axis to svg
const
xAxis
=
axisBottom
(
xScale
);
const
xAxisDraw
=
svg
.
select
(
"
.xAxis
"
)
.
attr
(
"
transform
"
,
`translate(0,
${
height
}
)`
)
.
attr
(
"
transform
"
,
`translate(0,
${
height
+
margin
.
top
}
)`
)
.
call
(
xAxis
);
if
(
document
.
getElementById
(
"
clip
"
)
===
null
&&
height
&&
width
)
{
svg
.
append
(
"
defs
"
).
append
(
"
clipPath
"
)
.
attr
(
"
id
"
,
"
clip
"
)
.
append
(
"
rect
"
)
.
attr
(
"
width
"
,
width
)
.
attr
(
"
height
"
,
height
)
.
attr
(
"
x
"
,
0
)
.
attr
(
"
y
"
,
0
);
}
svg
.
select
(
"
.timelineGroup
"
)
.
attr
(
"
clip-path
"
,
"
url(#clip)
"
);
//set up zoom and pan
const
handleZoom
=
(
event
)
=>
{
...
...
@@ -286,9 +299,10 @@ export const TimelineChart = (props) => {
<
div
className
=
"timeline"
>
<
svg
ref
=
{
svgRef
}
>
<
g
className
=
"timelineGroup"
>
<
g
className
=
"xAxis"
></
g
>
<
g
className
=
"yAxis"
></
g
>
</
g
>
<
g
className
=
"xAxis"
></
g
>
<
g
className
=
"yAxis"
></
g
>
<
g
className
=
"background"
/>
</
svg
>
</
div
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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