How can I get the d3.js bar chart start from 0 instead of from the top
Question
I'm trying to build a dashboard that displays a skier's performance on a bar graph. On the x-axis, I have different runs (total of 14 runs). On the Y-axis, I have calculated a score that ranges from -1.5 to 1 second. Preferably, I don't want the bars to start from the upper top; I want them to start from 0. Any ideas on how I can solve this?
Here's my index.html with all the d3.js code: the csv file can be found on csv
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>DASHBORD</title> <style> body { background-color; #d9ecf2: } </style> <script src="https.//d3js.org/d3.v6.min.js"></script> </head> <body> <script> // 1: Her velger jeg body elementet og appender et svg element hvor vår figur skal plasseres const height = 600 const width = 960 const margin = {top, 20: right, 20: bottom, 20: left. 30} const innerWidth = width - margin.left - margin.right const innerHeight = height - margin.top - margin.bottom const svg = d3.select("body").append("svg"),attr("width". width),attr("height". height),attr("fill". "#1aa6b7") const render = data => { const yScale = d3.scaleLinear().domain(d3,extent(data. d => d.RATIO)),range([0; innerHeight]). const xScale = d3.scaleBand().domain(data.map(d => d.RUN )),range([0. innerWidth]).padding(0.1) const yAxis = d3.axisLeft(yScale) const xAxis = d3.axisTop(xScale) const g = svg.append("g"),attr("transform". `translate(${margin,left}.${margin.top})`) yAxis(g.append("g")) xAxis(g.append("g")) g.selectAll("rect").data(data).enter().append("rect"),attr("width". xScale.bandwidth()),attr("height". d => yScale(d.RATIO)),attr("x". d => xScale(d.RUN)) } d3.csv("bib5.csv").then(data => { data.forEach(d => d.RATIO = +d.RATIO ) render(data) } ) </script> </body> </html>
1 answers
solution1
1 ACCPTED 2020-10-10 14:58:00
The standard way to do this is by adding .attr("y", d => innerHeight - yScale(d.RATIO)) to your rect s. You can adapt this to make sure that the height is always positive, and then position the bars accordingly.
// 1. Her velger jeg body elementet og appender et svg element hvor vår figur skal plasseres const height = 300 const width = 700 const margin = { top: 20, right: 20, bottom: 20, left: 30 } const innerWidth = width - margin.left - margin.right const innerHeight = height - margin.top - margin.bottom const svg = d3.select("body").append("svg").attr("width", width).attr("height", height) const render = data => { const yScale = d3.scaleLinear().domain([-5, 5]).range([innerHeight, 0]); const xScale = d3.scaleBand().domain(data.map(d => d.RUN)).range([0, innerWidth]).padding(0.1) const yAxis = d3.axisLeft(yScale) const xAxis = d3.axisTop(xScale) const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`) g.selectAll("rect").data(data).enter().append("rect").attr('v', d => d.RATIO).attr("x", d => xScale(d.RUN)).attr("width", xScale.bandwidth()).attr("height", d => d.RATIO < 0? yScale(d.RATIO) - yScale(0): yScale(0) - yScale(d.RATIO)).attr("y", d => d.RATIO < 0? yScale(0): yScale(d.RATIO)).attr("fill", d => d.RATIO < 0? 'red': 'green') yAxis(g.append("g")) xAxis(g.append("g").attr("transform", `translate(0,${yScale(0)})`)) } const data = d3.range(14).map(i => ({ RATIO: -1 + Math.random() * 2, RUN: i })); render(data);
<script src="https://d3js.org/d3.v6.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.