[英]How can I get the d3.js bar chart start from 0 instead of from the top
我正在尝试构建一个仪表板，在条形图上显示滑雪者的表现。 在 x 轴上，我有不同的运行（总共 14 次运行）。 在 Y 轴上，我计算了一个介于 -1.5 到 1 秒之间的分数。 最好，我不希望条形图从上顶部开始； 我希望他们从 0 开始。关于如何解决这个问题有什么想法吗？
这是我的 index.html 和所有 d3.js 代码：csv 文件可以在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>
执行此操作的标准方法是将.attr("y", d => innerHeight - yScale(d.RATIO))添加到您的rect s。 您可以调整它以确保高度始终为正，然后相应地设置 position 条。
// 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>
D3.js条形图，条形从上到下，而不是从下到上
[英]D3.js bar chart, bars extending from top to bottom, instead of bottom to top
动画 D3.js 条形图。 从底部到顶部。 请检查链接以获取参考图片
[英]Animate D3.js Bar Chart. From Bottom to Top. Please check the link for reference image
D3.js v5: 如何使用 filter() 获取可刷条形图选定区域中的数据
[英]D3.js v5: How can I use filter() to get the data in the selected region of a brushable bar chart
如何使用JSON字符串中的数据填充dimple d3.js折线图？
[英]How can I use my data from a JSON string to populate dimple d3.js line chart?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.