0

I am working on color legend using d3 and currently my legend is shown vertically but I want it to display horizontally. I have attached code snippet and also shared jsfiddle link.

    var svg = d3.select(selector_id)
    .append("svg")
    .attr("height", (legendheight) + "px")
    .attr("width", (legendwidth) + "px")
    .style("position", "absolute")
    .style("left", "0px")
    .style("top", "0px")

  svg
    .append("g")
    .attr("transform", "translate(" + (legendwidth - margin.left - margin.right + 3) + "," + (margin.top) + ")")
    .call(legendaxis);
};

I want something like this: https://i.sstatic.net/cCxSa.png

I have also attached fiddle link for more info:

https://jsfiddle.net/shru90/e42vcLy0/17/

Improve this question
2
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link.
    – Paulie_D
    Commented Oct 4, 2021 at 12:46
  • @Paulie_D I have edited my question to be more precise. Does it help now?
    – Harry
    Commented Oct 5, 2021 at 15:03

1 Answer 1

Reset to default
1

You can transform: rotate(90deg) CSS or in JavaScript from this method

Use for canvas, SVG

Improve this answer
3
  • Thanks it worked though but still need to to do bit css change to align both svg and canvas properly. Anyway thanks
    – Harry
    Commented Oct 4, 2021 at 12:47
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Oct 4, 2021 at 14:16
  • 1
    @Community I have edited my question to be more precise. Does it help now? I see that i am not able to post more question in stack overflow
    – Harry
    Commented Oct 5, 2021 at 15:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.