SVG arrow head to follow line direction

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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:

enter image description here

asked Nov 22 '18 at 8:39

johntanquinco

731111

add a comment |

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:

enter image description here

asked Nov 22 '18 at 8:39

johntanquinco

731111

add a comment |

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:

enter image description here

asked Nov 22 '18 at 8:39

johntanquinco

731111

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:

enter image description here

javascript reactjs react-native

asked Nov 22 '18 at 8:39

johntanquinco

731111

asked Nov 22 '18 at 8:39

johntanquinco

731111

asked Nov 22 '18 at 8:39

johntanquinco

731111

asked Nov 22 '18 at 8:39

johntanquinco

731111

asked Nov 22 '18 at 8:39

johntanquinco

731111

add a comment |

1 Answer
1

active

oldest

votes

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 ;-)

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

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 '18 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 '18 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 '18 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 '18 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 '18 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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

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 '18 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 '18 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 '18 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 '18 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 '18 at 6:59

add a comment |

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

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 '18 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 '18 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 '18 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 '18 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 '18 at 6:59

add a comment |

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

edited Nov 22 '18 at 11:10

answered Nov 22 '18 at 11:03

Max Kurtz

1149

answered Nov 22 '18 at 11:03

Max Kurtz

1149

answered Nov 22 '18 at 11:03

Max Kurtz

1149

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 '18 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 '18 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 '18 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 '18 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 '18 at 6:59

add a comment |

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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 9:40

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 '18 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 '18 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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky