Javascript 根据缩放调整点的大小

我正试图在d3.js中创建一个地图，其中点（美国科学资助机构）从.csv读取，按缩放级别缩放（基于初学者工具包）。我在其他地方看到过解决这个问题的其他解决方案，但它们通常在更复杂的项目中实例化（这使得我很难从它们中提取此功能）

读入数据：

var data;
function draw(){
    ....
    d3.csv("data/funders.csv", function(err, locations) {
      locations.forEach(function(i){
          addPoint(i['lng'], i['lat'], i['TotalFunding']);
      });
    });
}

我对svg的定义如下：

svg = d3.select("#container").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom) // my zoom function
    .on("click", click) // my click function
    .append("g");

g = svg.append("g");

接下来，我定义了一个将“g”附加到SVG的函数，然后继续添加一个类“gpoint”（地理点）

*需要保留原始尺寸信息，只需缩放即可

在这里，我想用当前的缩放级别乘以

size

（可以从

var scale=d3.event.scale；

中获得）。在我的代码中，我使用scale来调整CSS元素，该元素控制国家轮廓的笔划宽度，如下所示：

d3.selectAll(".country").style("stroke-width", 1.5 / scale);

但是，这很容易，因为我可以创建一个简单的链来访问“.country”CSS并修改此属性。然而，我不清楚如何在这个gpoint类中选择和变异元素

我很乐意添加任何额外的信息，我只是对张贴一堵代码墙感到谨慎

funders.csv： 编辑 我发现我可以改变圆的半径

g.attr("class", "gpoint").selectAll("circle").attr("r", s)

但是，我仍然无法访问圆的当前半径并对其进行变异，例如

g.attr("class", "gpoint").selectAll("circle").data(data).attr("r", function(d){return(d.r*s);}) 

编辑2 多亏@kscandrett的帮助，我才得以成功

其中一项要求是保持原来的尺寸。 简单地更改

'r'

不会做到这一点，但是创建点时，

数量

信息可以设置为点的

id

（我相信有更好的解决方案，例如使用对象存储此信息……但是，这是可行的）

1. 在创建资金金额信息时，将其保存为dot的

'id'

（同样，可能不是惯用的，但现在就可以了）

编辑3： 我现在知道如何“正确地”做到这一点。 不应使用

attr

，而应使用

datum

将此信息附加到每个圆，即

.datum（Math.sqrt（parseInt（amount）*0.001））

2. 定义一个pointScale函数

  function pointScale(amount, zoomScale){
  // Ugly code that will almost certainly be replaced, but it is good enough for now.
        var maxPossibleZoom = 100; 
        var sizeFloor = 0.12;
        var size = amount * (maxPossibleZoom/zoomScale*0.05);
        if (size > amount){
            return amount;
        } else if (size < sizeFloor){
            return sizeFloor * amount;
        } else {
            return size;
        }
   }

---

很好用

此示例将使圆圈增加10%

function changeSize() {
  d3.selectAll('circle').attr('r', function (d, i)
  {
    return d3.select(this).attr('r') * 1.1;
  });
}

例如：

---

作为起点，我使用了Jerome Cuckier创建的一些数据

我能够使用您的答案来解决我的问题。在python中，我们有

self

，但我没有联系到这里需要类似的东西，即

this

（我是JavaScript新手）。无论如何，非常感谢你的回答。

gpoint.append("svg:circle")
//...
.attr("id", Math.sqrt(parseInt(amount) * 0.001))
.attr("r", Math.sqrt(parseInt(amount) * 0.001))
//...

  function pointScale(amount, zoomScale){
  // Ugly code that will almost certainly be replaced, but it is good enough for now.
        var maxPossibleZoom = 100; 
        var sizeFloor = 0.12;
        var size = amount * (maxPossibleZoom/zoomScale*0.05);
        if (size > amount){
            return amount;
        } else if (size < sizeFloor){
            return sizeFloor * amount;
        } else {
            return size;
        }
   }

function move(){
//...
   var s = d3.event.scale;
//...
   d3.selectAll('circle').attr('r', function (d, i){
     var amount = d3.select(this).attr('id');
     return pointScale(amount, s); 
   });
}

function changeSize() {
  d3.selectAll('circle').attr('r', function (d, i)
  {
    return d3.select(this).attr('r') * 1.1;
  });
}