SVG arrow head to follow line direction
up vote
4
down vote
favorite
1
From the below code(not my code), how can I be able to align the arrow head path to follow the direction of the line?
import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryLine, Curve, Point } from "victory";
class Arrow extends React.Component {
render() {
const { data, scale } = this.props;
const last = data[data.length - 1];
const x = scale.x(last.x);
const y = scale.y(last.y);
const path = `M${x} ${y}
l 0 10
l 5 -10
l -10 -5
z`;
return (
<g>
<Curve {...this.props} />
<path d={path} stroke="black" />
</g>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryLine
domainPadding={{ x: 10, y: 10 }}
style={{
data: { stroke: "#c43a31" }
}}
data={[{ x: 2, y: 1 }, { x: 3, y: 3 }]}
dataComponent={<Arrow />}
/>
);
}
}
render(<App />, document.getElementById("root"));
Link: https://codesandbox.io/s/x5m74nzro
Example if you change the data value into:
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}
Then you will see that the arrow head is not looking goodor not following the direction of the line.
I want to achieve something like:
javascript reactjs react-native
asked Nov 22 at 8:39
johntanquinco
461111
add a comment |
up vote
4
down vote
favorite
1
From the below code(not my code), how can I be able to align the arrow head path to follow the direction of the line?
import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryLine, Curve, Point } from "victory";
class Arrow extends React.Component {
render() {
const { data, scale } = this.props;
const last = data[data.length - 1];
const x = scale.x(last.x);
const y = scale.y(last.y);
const path = `M${x} ${y}
l 0 10
l 5 -10
l -10 -5
z`;
return (
<g>
<Curve {...this.props} />
<path d={path} stroke="black" />
</g>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryLine
domainPadding={{ x: 10, y: 10 }}
style={{
data: { stroke: "#c43a31" }
}}
data={[{ x: 2, y: 1 }, { x: 3, y: 3 }]}
dataComponent={<Arrow />}
/>
);
}
}
render(<App />, document.getElementById("root"));
Link: https://codesandbox.io/s/x5m74nzro
Example if you change the data value into:
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}
Then you will see that the arrow head is not looking goodor not following the direction of the line.
I want to achieve something like:
javascript reactjs react-native
asked Nov 22 at 8:39
johntanquinco
461111
add a comment |
up vote
4
down vote
favorite
1
up vote
4
down vote
favorite
1
1
From the below code(not my code), how can I be able to align the arrow head path to follow the direction of the line?
import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryLine, Curve, Point } from "victory";
class Arrow extends React.Component {
render() {
const { data, scale } = this.props;
const last = data[data.length - 1];
const x = scale.x(last.x);
const y = scale.y(last.y);
const path = `M${x} ${y}
l 0 10
l 5 -10
l -10 -5
z`;
return (
<g>
<Curve {...this.props} />
<path d={path} stroke="black" />
</g>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryLine
domainPadding={{ x: 10, y: 10 }}
style={{
data: { stroke: "#c43a31" }
}}
data={[{ x: 2, y: 1 }, { x: 3, y: 3 }]}
dataComponent={<Arrow />}
/>
);
}
}
render(<App />, document.getElementById("root"));
Link: https://codesandbox.io/s/x5m74nzro
Example if you change the data value into:
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}
Then you will see that the arrow head is not looking goodor not following the direction of the line.
I want to achieve something like:
javascript reactjs react-native
asked Nov 22 at 8:39
johntanquinco
461111
From the below code(not my code), how can I be able to align the arrow head path to follow the direction of the line?
import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryLine, Curve, Point } from "victory";
class Arrow extends React.Component {
render() {
const { data, scale } = this.props;
const last = data[data.length - 1];
const x = scale.x(last.x);
const y = scale.y(last.y);
const path = `M${x} ${y}
l 0 10
l 5 -10
l -10 -5
z`;
return (
<g>
<Curve {...this.props} />
<path d={path} stroke="black" />
</g>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryLine
domainPadding={{ x: 10, y: 10 }}
style={{
data: { stroke: "#c43a31" }
}}
data={[{ x: 2, y: 1 }, { x: 3, y: 3 }]}
dataComponent={<Arrow />}
/>
);
}
}
render(<App />, document.getElementById("root"));
Link: https://codesandbox.io/s/x5m74nzro
Example if you change the data value into:
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}
Then you will see that the arrow head is not looking goodor not following the direction of the line.
I want to achieve something like:
javascript reactjs react-native
javascript reactjs react-native
asked Nov 22 at 8:39
johntanquinco
461111
asked Nov 22 at 8:39
johntanquinco
461111
asked Nov 22 at 8:39
johntanquinco
461111
asked Nov 22 at 8:39
johntanquinco
461111
asked Nov 22 at 8:39
johntanquinco
461111
461111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Victory is a handy graphic tool for React, but it is obvious that VictoryLine and code in codesandbox don't provide any arrow-relative calculations within itself. So, you should write a function which will calculate (using trigonometry) all the arrow points and pass them to VictoryLine. Or maybe somewhere is a library which can draw arrows by parameters and you will be lucky to find it ;-)
answered Nov 22 at 11:03
Max Kurtz
987
thanks for your comment. I am actually using VictoryLine creating customdataComponentto achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.
– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)
– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to usedata={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}and your path seems be not in the right direction.
– johntanquinco
Nov 26 at 9:40
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426846%2fsvg-arrow-head-to-follow-line-direction%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Victory is a handy graphic tool for React, but it is obvious that VictoryLine and code in codesandbox don't provide any arrow-relative calculations within itself. So, you should write a function which will calculate (using trigonometry) all the arrow points and pass them to VictoryLine. Or maybe somewhere is a library which can draw arrows by parameters and you will be lucky to find it ;-)
answered Nov 22 at 11:03
Max Kurtz
987
thanks for your comment. I am actually using VictoryLine creating customdataComponentto achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.
– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)
– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to usedata={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}and your path seems be not in the right direction.
– johntanquinco
Nov 26 at 9:40
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
add a comment |
up vote
0
down vote
Victory is a handy graphic tool for React, but it is obvious that VictoryLine and code in codesandbox don't provide any arrow-relative calculations within itself. So, you should write a function which will calculate (using trigonometry) all the arrow points and pass them to VictoryLine. Or maybe somewhere is a library which can draw arrows by parameters and you will be lucky to find it ;-)
answered Nov 22 at 11:03
Max Kurtz
987
thanks for your comment. I am actually using VictoryLine creating customdataComponentto achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.
– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)
– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to usedata={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}and your path seems be not in the right direction.
– johntanquinco
Nov 26 at 9:40
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
add a comment |
up vote
0
down vote
up vote
0
down vote
Victory is a handy graphic tool for React, but it is obvious that VictoryLine and code in codesandbox don't provide any arrow-relative calculations within itself. So, you should write a function which will calculate (using trigonometry) all the arrow points and pass them to VictoryLine. Or maybe somewhere is a library which can draw arrows by parameters and you will be lucky to find it ;-)
answered Nov 22 at 11:03
Max Kurtz
987
Victory is a handy graphic tool for React, but it is obvious that VictoryLine and code in codesandbox don't provide any arrow-relative calculations within itself. So, you should write a function which will calculate (using trigonometry) all the arrow points and pass them to VictoryLine. Or maybe somewhere is a library which can draw arrows by parameters and you will be lucky to find it ;-)
answered Nov 22 at 11:03
Max Kurtz
987
edited Nov 22 at 11:10
answered Nov 22 at 11:03
Max Kurtz
987
answered Nov 22 at 11:03
Max Kurtz
987
answered Nov 22 at 11:03
Max Kurtz
987
987
thanks for your comment. I am actually using VictoryLine creating customdataComponentto achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.
– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)
– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to usedata={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}and your path seems be not in the right direction.
– johntanquinco
Nov 26 at 9:40
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
add a comment |
thanks for your comment. I am actually using VictoryLine creating customdataComponentto achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.
– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)
– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to usedata={[{ x: 5, y: 1 }, { x: 3, y: 3 }]}and your path seems be not in the right direction.
– johntanquinco
Nov 26 at 9:40
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
thanks for your comment. I am actually using VictoryLine creating custom
dataComponent to achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.– johntanquinco
Nov 26 at 5:07
thanks for your comment. I am actually using VictoryLine creating custom
dataComponent to achieve this line with arrow head. And I was able to convert the code above into react-native. But just need help how to make the arrow head follow the correct direction of the line from the codesandbox and will convert it to RN.– johntanquinco
Nov 26 at 5:07
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =
M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)– Max Kurtz
Nov 26 at 9:24
Sorry, I didn't get this at first time, I thought you need a universal tool. Ok, here is my masterpiece of Arrow: const path =
M${x+10} ${y+-6} l -11 3 l 3 5.5 z; ;-)– Max Kurtz
Nov 26 at 9:24
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to use
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]} and your path seems be not in the right direction.– johntanquinco
Nov 26 at 9:40
thanks for sharing your custom path. However the main goal as stated in the original post and in my comment is to have the arrow head follow the line direction. What if the line is now pointing on the opposite direction? Please see the images above. In the codesandbox, I tried to use
data={[{ x: 5, y: 1 }, { x: 3, y: 3 }]} and your path seems be not in the right direction.– johntanquinco
Nov 26 at 9:40
1
1
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
So, finally, you want a universal tool for drawing arrows in different directions? I told you - there is no way to do it typing a few digits. Every time you change direction or angle (to axis X) of your line you have to recalculate triangle tops coordinates. Tips: 1) make an arrow triangle aligned to axis X at the end of your line 2) calculate angle between your line and axis X 3) rotate the arrow triangle to the angle you got from step 2.
– Max Kurtz
Nov 26 at 10:08
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
thanks @Max Kurtz, though im not yet sure how to achieve that. I was hoping that the above code I set as an example would be enough to be modified by someone who can help me to achieve the goal. Im still new working in RN, so still need a lot to learn.
– johntanquinco
Nov 28 at 6:59
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426846%2fsvg-arrow-head-to-follow-line-direction%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
