Das letzte Häkchen wird nicht in d3-Diagrammen angezeigt

Ich habe ein Liniendiagramm in D3 erstellt und der letzte Tick-Wert auf der Y-Achse wird aus irgendeinem Grund nicht angezeigt. Ich habe die Tick-Werte auf einen höheren Wert geändert, aber immer noch nichts angezeigt. Irgendeine Reparatur dafür? Der Code ist unten. Ich habe auch ein Bild der Grafik eingefügt. Der letzte Tick-Wert hat "$ 7B"Das letzte Häkchen wird nicht in d3-Diagrammen angezeigt

<!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

Quelle

2016-04-11 dedpo

hast du versucht, .ticks (7) oder .ticks (7.5) zu setzen, wenn du die yAxis erstellst? – ryansstack

tat ich. Es funktioniert nicht :(@ryansstack – dedpo

oh, wie wäre es, wenn Sie die Y-Skala einstellen, verwenden Sie 7,25b, die y-Achse kann derzeit nicht wirklich hoch gehen, wenn Ihr hoher Wert ist 6,95b (bearbeiten: warum ändere auch nicht das Minimum auf 3.0b, keine Daten da unten) – ryansstack

Ändern Sie diese Zeile sagen 7.01b als max der y-Achse

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

y.domain([3000000000, 7000000001])

wenn Sie noch zurück möchte die Funktion nutzen, wie wäre es mit

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); } 
]);

Quelle

2016-04-11 23:50:15 ryansstack

Das hat funktioniert !! Ich danke dir sehr :) – dedpo

Das letzte Häkchen wird nicht in d3-Diagrammen angezeigt

Antwort

Verwandte Themen