gpt4 book ai didi

javascript - 如何使用 d3.js 限制半径大小

转载 作者:行者123 更新时间:2023-11-29 14:57:46 26 4
gpt4 key购买 nike

我确定解决方案很简单,但我正在尝试了解如何在将圆绘制到地理 map 上时限制半径范围。我的值的大小范围很大,而较大的值最终会覆盖 map 的大部分区域。

d3.csv("getdata.php", function(parsedRows) {

data = parsedRows
for (i = 0; i < data.length; i++) {
var mapCoords = this.xy([data[i].long, data[i].lat])
data[i].lat = mapCoords[0]
data[i].long = mapCoords[1]
}

vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("cx", function(d) { return d.lat })
.attr("cy", function(d) { return d.long })
.attr("stroke-width", "none")
.attr("fill", function() { return "rgb(255,148,0)" })
.attr("fill-opacity", .4)
.attr("r", function(d) { return Math.sqrt(d.count)})
})

这就是我现在拥有的。

最佳答案

您可能想要使用 d3 scales通过设置 domain(最小/最大输入值)和 range(最小/最大输出允许值)。为简化此过程,请毫不犹豫地使用 d3.mind3.max 来设置域的值。

d3.scale 将返回一个函数,您可以在分配 r 属性值时使用该函数。例如:

var scale = d3.scale.linear.domain([ inputMin, inputMax ]).range([ outputMin, outputMax ]);
vis.selectAll("circle")
// etc...
.attr( 'r', function(d) { return scale(d.count) });

关于javascript - 如何使用 d3.js 限制半径大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15127031/

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