Question

我在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 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

Answer 1

更改此行以返回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); }
]);

最后一个刻度不会显示在d3图表中

1 个答案: