我是D3.js.的新手。我正在尝试使用它构建一个可排序的条形图。在我的代码中,条形图正确排序但每个条形图上的标签都没有排序。我无法找出错误在哪里?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar{
fill:steelblue;
fill-opacity: .9;
}
.text {
fill: green;
}
.bar:hover {
fill: #F18E18;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<body>
<label><input type="checkbox"> Sort values</label>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - 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");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(20, ".");
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 + ")");
d3.tsv("humanweight.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.age; }));
y.domain([0, d3.max(data, function(d) { return d.fatness; })]);
svg.append("text")
.attr("x", width / 2 )
.attr("y", 0)
.style("text-anchor", "middle")
.text("Human Age-Fatness");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x",900)
.style("text-anchor", "start")
.text("Age");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Fatness");
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.transition().delay(function(d,i){return i*50;})
.duration(700)
.attr("x", function(d) { return x(d.age); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.fatness); })
.attr("height", function(d) { return height - y(d.fatness); });
svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.fatness;
})
.attr("x", function(d,i) {
return i*(width/data.length)+20;
})
.attr("y", function(d) {
return height-(d.fatness*10);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
d3.select("input").on("change", change);
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
// Copy-on-write since tweens are evaluated after a delay.
var x0 = x.domain(data.sort(this.checked
? function(a, b) { return b.fatness - a.fatness; }
: function(a, b) { return d3.ascending(a.age, b.age); })
.map(function(d) { return d.age; }))
.copy();
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0(d.age); });
transition.selectAll(".text")
.delay(delay)
.attr("x", function(d) {
console.log(d.fatness);
return x0(d.age); })
.attr("y", function(d) { return height-(d.fatness*10);
});
/*.text(function(d) {
return d.fatness;
})
.attr("x", function(d,i) {
return i*(width/data.length)+20;
})
.attr("y", function(d) {
return height-(d.fatness*10);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
*/
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}
});
function type(d) {
d.fatness = +d.fatness;
return d;
}
</script>
<body>
答案 0 :(得分:0)
一行:
.attr("class", "text")
代码的这一部分缺少
svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class", "text") // <<---- line that is missing
.text(function(d) {
return d.fatness;
})