\n
<\/p>\nIf you pull random D3 examples from the internet, you may get into a situation where chart axes are backwards from what you’d want:
\n<\/p>\n
E.g. this is what I had:<\/p>\n
\nx.domain(d3.extent(data, (d) => d[0]));\ny.domain([0, d3.max(data, (d) => d[1])]);\n<\/pre>\nThe easiest way to fix this is to take control over the axis endpoints, like so:<\/p>\n
\n x.domain([d3.max(data, (d) => d[0]), 0]);\n y.domain([0, d3.max(data, (d) => d[1])]);\n<\/pre>\nThis way you can flip them however you want, set the endpoints how you want, etc. If you just want to show data which is in your range, you can do [d3.max(…), d3.min(…)]. Alternately, if you want to make several charts that are all the same, you’d want to set them all to have the same range:<\/p>\n
\nx.domain([30, 0]);\n<\/pre>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
How to flip a D3 chart<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[136,302],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t