最後のティックがd3チャートに表示されない

D3で折れ線グラフを作成しましたが、何らかの理由でY軸の最後のティック値が表示されません。ティックの値をより高い値に変更しましたが、それでも何も表示されません。これに対する修正？コードは以下の通りです。私はまた、チャートの写真も含めました。最後の目盛り値は "$ 7B"最後のティックがd3チャートに表示されない

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

出典

2016-04-11 dedpo

yAxisを作成するときに.ticks（7）や.ticks（7.5）を設定しようとしましたか？ – ryansstack

でした。それは動作しません:(@ryansstack – dedpo

ああ、あなたはYスケールを設定しているときは、7.25bを使用して、y軸は実際にはその高い値にならないかもしれません。6.95b どうしても最小値を3.0bにも変えないで、そこにデータはありません） – ryansstack

変更y軸あなたであれば、まだ

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

y.domain([3000000000, 7000000001])

のmaxと7.01bを返すために、この行を言っています機能を使いたい場合はどうすればいいのですか？

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

出典

2016-04-11 23:50:15 ryansstack

それは働いた！どうもありがとうございます：） – dedpo

最後のティックがd3チャートに表示されない

答えて

関連する問題