6
Tôi là một nhà thiết kế chỉ mới bắt đầu đánh lừa xung quanh với một số hướng dẫn d3 và tất nhiên tôi chỉ bị kẹt ở một thời điểm nào đó. Tôi đã tự hỏi đó là cách tốt nhất để làm nổi bật các cột lớn nhất và nhỏ hơn trong một biểu đồ thanh. Tôi muốn chúng khác nhau về màu sắc, chẳng hạn như "đỏ" cho nhỏ hơn "xanh lục" cho lớn nhất. Bất cứ ai có thể giúp tôi không.D3.js - Làm cách nào để đánh dấu các cột lớn nhất và nhỏ nhất (tối thiểu và tối đa) trong biểu đồ thanh?
Đây là những gì tôi đã nhận cho đến nay:
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var t = 1297110663, // start time (seconds since epoch)
v = 70, // start value (subscribers)
data = d3.range(30).map(next); // starting dataset
function next() {
return {
time: ++t,
value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
};
}
setInterval(function() {
data.shift();
data.push(next());
redraw();
}, 1500);
var w = 11,
h = 120;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, w]);
var y = d3.scale.linear()
.domain([0, 100])
.range([0, h]);
var chart = d3.select("body").append("svg")
.attr("width", w * (data.length +3))
.attr("height", h);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i) ; })
.attr("y", function(d) { return h - y(d.value) - .5; })
.attr("width", w)
.attr("height", function(d) { return y(d.value); })
.style("fill", "#ccc")
.style("stroke", "white")
chart.select("rect")
.style("fill", "red");
chart.append("line")
.attr("x1", 0)
.attr("x2", w * (data.length))
.attr("y1", h - .5)
.attr("y2", h - .5)
.style("stroke", "black");
</script>
Nhiều Cảm ơn trước
Cảm ơn @enjalot. Tôi đã có thể tìm ra cách để làm điều đó vì bình luận của bạn. Điều olny tôi đã thay đổi đã thực sự sử dụng sellectAll ("rect") thay vì chọn ("rect"). Với chọn nó chỉ hoạt động khi max và min ở vị trí đầu tiên. 'var max = d3.max (dữ liệu, hàm (d) {return d.value}) chart.selectAll (" rect ") bộ lọc (hàm (d) {return d.value === max}) . được phân loại ("tối đa", đúng) .attr ("điền", "xanh lục") ' –