Formatting issue in D3
Question
I am having a formatting issue with a d3 graphical representation. The X axis is entered in years, which I thought would be easier to treat as any other number (instead of as dateFormat... %Y ) The output is automatically (?) adds the comma for the thousandths place- my assumption. Is there a way to keep this the 4 dig int that it is?
(this is my first foray into HTML, CSS, JS and d3-- thank you for empathy/comments) Thanks.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 40, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxisLeft = d3.svg.axis().scale(y0)
.orient("left").ticks(5);
var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y0(d.freq); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y1(d.fn); });
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 + ")");
// Get the data
d3.csv("duallines2.csv", function(error, data) {
data.forEach(function(d) {
d.year = +(d.year);
d.freq = +d.freq;
d.fn = +d.fn;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y0.domain([0, d3.max(data, function(d) {
return Math.max(d.freq); })]);
y1.domain([0, d3.max(data, function(d) {
return Math.max(d.fn); })]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
svg.append("path") // Add the valueline2 path.
.style("stroke", "red")
.attr("d", valueline2(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style("fill", "steelblue")
.call(yAxisLeft);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "red")
.call(yAxisRight);
});
</script>
</body>
The datafile looks like this:
"duallines2.csv"
year,freq,fn 1950,58.13,3.41 1951,53.98,4.55 1952,67.00,6.78 1953,89.70,7.85 1954,99.00,8.92 1955,130.28,9.92 1956,166.70,10.13 1957,234.98,12.23 1958,345.44,13.45 1959,443.34,16.04 1960,543.70,18.03 1961,580.13,21.02 1962,605.23,22.34 1963,622.77,20.15 1964,626.20,21.26 1965,628.44,31.04 1966,636.23,35.04 1967,633.68,41.02 1968,624.31,43.05 1969,629.32,46.03 1970,618.63,51.03 1971,599.55,53.42 1973,609.86,57.82 1974,617.62,59.01 1975,614.48,56.03 1976,606.98,58.01
1 answers
solution1
0 ACCPTED 2014-11-10 21:48:36
You can define your own format -- in this case making each xAxis tick label an integer -- and then tell the xAxis to use that format :
var format = d3.format("d");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(format); // <----- tell the xAxis to use your custom formatter
And here's the updated output you'll get:
See the docs on formatting numbers here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.