个人中心
gpt4 book ai didi

javascript - 使用条形图可视化数据

转载 作者：太空宇宙 更新时间：2023-11-04 15:53:44 27 4
gpt4 key购买 nike

我的条形图如下所示。

enter image description here

我想像这样配置xAxis(底部的年份)。我收到重复的年份。如何删除重复的年份？

enter image description here

这是我的代码。

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .bar {
        fill: orange;
    }

    .bar:hover {
        fill: orangered ;
    }

    .x.axis path {
        display: none;
    }

    .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }

    /* Style northward tooltips differently */
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

    var margin = {top: 40, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var formatPercent = d3.format("0");

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(formatPercent);

    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            return "<strong>Frequency:</strong> <span style='color:red'>" + d[1] + "</span>";
        })

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);

    var jonData = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
    d3.json(jonData, function(error, data) {
        if(error){
            return console.warn(error);
        }
//        console.log(data.data);

        data = data.data;
        data.map(function(d)
        {
            var date = new Date(d[0]);

            console.log(date.getFullYear());
        });
        x.domain(data.map(function(d) { return d[0]; }));
        y.domain([0, d3.max(data, function(d) { return d[1]; })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Gross Domestic Product, USA");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d[0]); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { return height - y(d[1]); })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)

    });

</script>

我正在关注此链接 Using d3-tip to add tooltips to a d3 bar chart 。我在这里做错了什么？

谢谢!

最佳答案

您的代码的主要问题是您使用的是序数比例。您可以使用序数刻度(如您所见，条形图已显示)，但您必须创建一个临时代码来消除刻度。

“正确”的方法是使用时间刻度，因为您的数据与时间相关:

var x = d3.time.scale()
    .range([0, width]);

但是，您必须解析日期:

var timeFormat = d3.time.format("%Y-%m-%d")

data.forEach(function(d) {
    d[0] = timeFormat.parse(d[0]);
});

并更改 x 域:

x.domain(d3.extent(data, function(d) {
    return d[0]
}));

这是您进行更改的代码，在轴生成器中使用 ticks(10):

var margin = {
    top: 40,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format("0");

var x = d3.time.scale()
  .range([0, width]);

var y = d3.scale.linear()
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(15);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(formatPercent);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var timeFormat = d3.time.format("%Y-%m-%d")

var jonData = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
d3.json(jonData, function(error, data) {
  if (error) {
    return console.warn(error);
  }

  data = data.data;

  data.forEach(function(d) {
    d[0] = timeFormat.parse(d[0]);
  });

  x.domain(d3.extent(data, function(d) {
    return d[0]
  }));
  y.domain([0, d3.max(data, function(d) {
    return d[1];
  })]);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Gross Domestic Product, USA");

  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d[0]);
    })
    .attr("width", width / data.length)
    .attr("y", function(d) {
      return y(d[1]);
    })
    .attr("height", function(d) {
      return height - y(d[1]);
    })
    
});
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered;
}

.x.axis path {
  display: none;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

关于javascript - 使用条形图可视化数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42888529/

27 4 0
文章推荐： c++ - SomeClass* initialEl = new SomeClass[5];
文章推荐： javascript - 使用 ":checked"切换显示和隐藏 <iframe>
文章推荐： c++ - 如何使 void** 指向一个函数？
文章推荐： html - 从最后一个列表项中删除分隔符，但也删除分隔符
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com