Question

我正在尝试构建一个仪表板，以条形图显示滑雪者的表现。在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>

Answer 1

执行此操作的标准方法是将.attr("y", d => innerHeight - yScale(d.RATIO))添加到rect中。您可以对此进行调整，以确保高度始终为正，然后相应地放置钢筋。

// 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条形图从0开始而不是从顶部开始

1 个答案: