我的条形图与Mike Bostock的Let's Make A Bar Chart非常相似。
我的数据集是1970年至2015年的一组年份,附有一个数字。将我的数据移植到示例代码呈现:
糟糕!我想要少一些滴答,所以决定在x轴上添加一个滴答计数:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10);
但是,这并不起作用,因为显然我们只能在线性刻度上指定我们想要的刻度数。所以我决定使用time scale,将我所有年份的数字转换为Javascript Date对象(设置为1月1日):
现在我可以限制我得到的滴答数,但是
x.rangeBand()
来确定我的酒吧的宽度为了获得图1的刻度美学,但是图2的刻度计数,我是否需要自己进行所有这些条形坐标/宽度计算?我应该使用序数量表还是其他量表?
答案 0 :(得分:4)
在这里结合选择。
1。)您可以保留日期时间轴,但是将日期移动1.577e + 10毫秒(6个月),以便在年中发生。
2。)我喜欢的解决方案是保持你的序数规模,但使用自定义格式化程序:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
// show every other label
.tickFormat(function(d,i){
if (i % 2) return d;
else return null;
});
这是第二种方法的一个例子:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d, i) {
if (i % 2) return d;
else return null;
});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
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 + ")");
var data = [{
"letter": "1970",
"frequency": 0.08167
}, {
"letter": "1971",
"frequency": 0.01492
}, {
"letter": "1972",
"frequency": 0.02782
}, {
"letter": "1973",
"frequency": 0.04253
}, {
"letter": "1974",
"frequency": 0.12702
}, {
"letter": "1975",
"frequency": 0.02288
}, {
"letter": "1976",
"frequency": 0.02015
}, {
"letter": "1977",
"frequency": 0.06094
}, {
"letter": "1978",
"frequency": 0.06966
}, {
"letter": "1979",
"frequency": 0.00153
}, {
"letter": "1980",
"frequency": 0.00772
}, {
"letter": "1981",
"frequency": 0.04025
}, {
"letter": "1982",
"frequency": 0.02406
}, {
"letter": "1983",
"frequency": 0.06749
}, {
"letter": "1984",
"frequency": 0.07507
}, {
"letter": "1985",
"frequency": 0.01929
}, {
"letter": "1986",
"frequency": 0.00095
}, {
"letter": "1987",
"frequency": 0.05987
}, {
"letter": "1988",
"frequency": 0.06327
}, {
"letter": "1989",
"frequency": 0.09056
}, {
"letter": "1990",
"frequency": 0.02758
}, {
"letter": "1991",
"frequency": 0.00978
}, {
"letter": "1992",
"frequency": 0.0236
}, {
"letter": "1993",
"frequency": 0.0015
}, {
"letter": "1994",
"frequency": 0.01974
}, {
"letter": "1995",
"frequency": 0.00074
}];
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return d.frequency;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.frequency);
})
.attr("height", function(d) {
return height - y(d.frequency);
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
&#13;