个人中心
gpt4 book ai didi

javascript - 最后一个价格变动未显示在 d3 图表中

转载 作者：行者123 更新时间：2023-12-02 14:46:30 25 4
gpt4 key购买 nike

我在 D3 中制作了折线图，但由于某种原因未显示 y 轴上的最后一个刻度值。我将刻度值更改为更高的值，但它仍然不显示任何内容。有什么解决办法吗？代码如下。我还附上了图表的图片。最后一个刻度值必须为“$7B”

 <!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>Unemployment by Ward Bar Chart</title>

<style type="text/css">
.axis text{
  font-family: Arial;
  font-size: 13px;
  color: #333333;
  text-anchor: end;
}

path { 
stroke: steelblue;
stroke-width: 2;
fill: none;
}

 .axis path,
 .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}


 .textlabel{
    font-family:  Arial;
    font-size:13px;
    color: #333333;
    text-anchor: middle;
  }
 }

  </style>
 <body>


 <script src="http://d3js.org/d3.v3.min.js"></script>

<script>

 // Set the dimensions of the canvas / graph
  var margin = {top: 20, right: 0, bottom: 60, left: 60},

width = 475;
height = 350;
padding = 100; 


// Adds the svg canvas
 var svg = d3.select("body")
.append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
   .attr("viewBox", "0 0 " + width + " " + height);


 // Parse the date / time
var parseDate = d3.time.format("%m/%d/%y").parse;
 var formatTax = d3.format(",.2f");

 // Set the ranges
 var x = d3.time.scale()
    .range([0, width - margin.right - margin.left], .1)
    .nice();


  var y = d3.scale.linear()
    .range([height - margin.top - margin.bottom, 15])
    .nice();

   // Define the axes
 var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5);

   var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(function(d) {return "$" + d + "B"});



 // Define the line
 var valueline = d3.svg.line()

.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d["Tax Collections"]); });




 // Get the data
 d3.csv("Yearly Tax Collections.csv", function(error, data) {
data.forEach(function(d) {
    d.Date = parseDate(d.Date);
    d["Tax Collections"] = formatTax(+d["Tax Collections"]/1000000000);
});


 // Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain([0, d3.max(data, function(d) { return d["Tax Collections"]; })]);

// Add the valueline path.
     svg.append("path")
    .attr("class", "line")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     .attr("d", valueline(data));

 // Add the X Axis
 svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(yAxis);

    // Y-axis labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate ("+ (padding/4) + "," +(height/2)+") rotate(-90)")
.text("Tax Revenue")
.style("font-family", "Arial"); 

// X-axis labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")
.text("Fiscal Year")
.style("font-family", "Arial"); 

 //source

svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/4.5) + "," +(height/1) + ")")
.text("Source: DC OCFO")
.style("font-family", "Arial")

//title for the chart 

svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/3) + "," +(height/30) + ")")
.text("DC Total Tax Revenues by Fiscal Year")
.style("font-family", "Arial");


svg.append("text")
.attr("text-anchor", "left")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/20) + "," +(height/12) + ")")
.text("2000 to 2015")
.style("font-family", "Arial")

//line labels

svg.append('g')
.classed('labels-group', true)
.selectAll('text')
.data(data)
.enter()

.append('text')
.filter(function(d, i) { return i === 0||i === (data.length - 1) })
 .classed('label',true)

.classed('label',true)
.attr({
    'x':function(d,i) {
        return x(d.Date);

    },
      'y':function(d,i) {
        return y(d["Tax Collections"]);
    }
})
 .text(function(d,i){
    return "$" + d["Tax Collections"] + "B";
 })
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 



});

 </script>
</body>

This is the chart not displaying the last tick on y-axis 

 This is the CSV:
  Date  Tax Collections
  1/1/00    3127849000
  1/1/01    3316379000
  1/1/02    3229809000
  1/1/03    3384093000
  1/1/04    3806906000
  1/1/05    4251191000
  1/1/06    4472845000
  1/1/07    5146007000
  1/1/08    5333118000
  1/1/09    5042487000
  1/1/10    4956910000
  1/1/11    5260486000
  1/1/12    5833054000
  1/1/13    6128210000
  1/1/14    6325257000
  1/1/15    6951000000

最佳答案

更改此行以返回 7.01b 作为 y 轴的最大值

y.domain([0, d3.max(data, function(d) { return d["Tax Collections"]; })]);

y.domain([3000000000, 7000000001])

如果您还想使用该功能，可以吗

y.domain([ 
    d3.min( data, function(d){ return 1e9*Math.floor(d["Tax Collection"]/1e9); }, 
    d3.max( data, function(d){ return 1e9*Math.ceil(d["Tax Collection"]/1e9); }
]);

关于javascript - 最后一个价格变动未显示在 d3 图表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36561064/

25 4 0
文章推荐： javascript - NodeJS中传递回调函数变成Object
文章推荐： javascript - Angular : $scope works but "controller as" does not fire ng-change event
文章推荐： JavaScript 与 Mongoose 的 Promise
文章推荐： javascript - 我删除了 package.json 和 Gruntfile.js，现在 Grunt 将不会加载依赖项
行者123
个人简介

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

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