如何限制半径的大小与d3.js

How to Limit Size of Radius With d3.js

本文关键字：d3 js 何限制      更新时间：2023-09-26

我确信解决方案是直截了当的，但我正试图找出如何限制半径的范围，当我在地图上绘制圆。我的值的大小差别很大，较大的值最终覆盖了地图的很大一部分。

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

您可能希望通过设置domain(最小/最大输入值)和range(最小/最大输出允许值)来使用d3 scales。为了简化此操作，请毫不犹豫地使用d3.min和d3.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) });
相关文章：