gpt4 book ai didi

javascript - 动态调整 D3 TopoJSON map 上的点大小

转载 作者:行者123 更新时间:2023-11-28 20:05:05 25 4
gpt4 key购买 nike

我使用 D3 在 TopoJSON map 上绘制了点,代码如下:

<!DOCTYPE html>
<meta charset="utf-8">

<head>

<script src="js/d3.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>

<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
</style>

</head>

<body>

<script>
var width = 960,
height = 500;

var projection = d3.geo.mercator()


var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var path = d3.geo.path()
.projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("data/world-110m2.json", function(error, topology) {

// load and display the cities
d3.json("data/commodities3.json", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.location_lon, d.location_lat])[0];})
.attr("cy", function(d) {
return projection([d.location_lon, d.location_lat])[1];})
.attr("r", 4)
.style("fill", "green");







});

//plot the path

g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));

});

svg.call(zoom)

</script>
</body>
</html>

我现在正在根据d.commodity_text 的值调整这些点的大小。因此,如果商品文本等于“铁”,那么圆圈会更大吗?谢谢。

最佳答案

您只需用函数替换半径的静态值即可:

.attr("r", function(d) {
if(d.commodity_text == "Iron") {
return 6;
} else {
return 4;
}
});

关于javascript - 动态调整 D3 TopoJSON map 上的点大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20958420/

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