我正在根据Scott Murray的教程制作一个可排序的d3条形图,但他没有解释如何将x轴标签与条形图一起排序,尽管进行了各种尝试,我还是没能弄清楚。这是我的密码;相关的函数是底部附近的"sortBars",但我已经将其余部分包含在上下文中。
(这是一个问题,但我似乎无法正确地从JSON中转换数据。)
条形高度为data.days(即数字,即天数);标签是data.names。我该如何对标签进行排序?
function retirements(presidents){
var data = presidents;
var margin = {top: 20, right: 20, bottom: 180, left: 80},
width = 1100 - margin.left - margin.right,
height = 650 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(data.names)
.rangeBands([0, width], .1);
var y = d3.scale.linear()
.domain([0, Math.ceil(d3.max(data.days)/1000)*1000])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return d + " days";
})
var svg = d3.select(".container")
.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 + ")");
svg.call(tip);
var barWidth = width / data.days.length;
svg.selectAll("rect")
.data(data.days)
.enter().append("rect")
// this might be affected:
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return height - y(d) + 1; })
.attr("width", barWidth - 1)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.9em")
.attr("dy", ".25em")
.attr("transform", "rotate(-50)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-6em")
.attr("dx","-15em")
.style("text-anchor", "end")
.text("Days");
var sortOrder = false;
var sortBars = function() {
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.descending(a, b);
} else {
return d3;
}
})
.transition()
.duration(1000)
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })
$("#descending").on("click", function(){
sortOrder = true;
sortBars();
});
$("#chronological").on("click", function(){
sortOrder = false;
sortBars();
});
};
首先不要有两个不同的总裁及其数据数组。让我们把它变成一个对象,这样tat排序就很容易了。
var newData = [];
data.names.forEach(function(d, i) {
newData.push({
name: d,//now object will have a name
days: data.days[i],//days will hold the president data
id: i //id of the record for chronology sorting
})
});
现在进行排序:
var sortBars = function() {
if (sortOrder){
//sort on basis of date
var sorted = newData.sort(function(a, b) {
return d3.descending(a.days, b.days);
});
} else {
//sort on basis of id
var sorted = newData.sort(function(a, b) {
return d3.ascending(a.id, b.id);
});
}
//set the domain post sorting
x.domain(sorted.map(function(d) {
return d.name;
}))
//sort the bars
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.descending(a.days, b.days);
} else {
return d3.ascending(a.id, b.id);
}
});
//make transition
var transition = svg.transition().duration(750),
delay = function(d, i) {
return i * 50;
};
//transition dor xa axis labels
transition.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.9em")
.attr("dy", ".25em")
.attr("transform", "rotate(-50)")
.delay(delay);
//transition for bars.
transition.selectAll("rect")
.attr("transform", function(d, i) {
return "translate(" + i * barWidth + ",0)";
});
}
此处的工作代码
希望这能有所帮助!