gpt4 book ai didi

D3.js - 如何在条形图中突出显示最大和最小(最小和最大)列?

转载 作者:行者123 更新时间:2023-12-04 15:23:36 24 4
gpt4 key购买 nike

我是一名设计师,刚开始玩一些 d3 教程,当然我只是在某些时候卡住了。我想知道在条形图中突出显示最大和较小列的最佳方法是什么。我希望它们的颜色不同,比如“红色”代表较小的“绿色”代表最大的。任何人都可以帮助我。

这是我到目前为止得到的:

<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>

提前谢谢了

最佳答案

您可以使用:

d3.max(data, function(d) { return d.value; });

以及相应的 d3.min函数来获取您的范围(还有 d3.extent 返回 [min, max] )。

那你可以说:
chart.select("rect")
.filter(function(d) { return d.value === max; })
.classed("max", true);

这将添加 max分类到具有最大值的任何条。对 min 执行相同操作你很好。

您还应该保存您的选择,例如:
var bars = chart.selectAll("rect")
.data(data);

//use later, like
bars.enter()...
bars.filter()...

关于D3.js - 如何在条形图中突出显示最大和最小(最小和最大)列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18047375/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com