javascript - 在 D3 中调整圆 SVG 的大小

Question

我正在尝试更改 D3 中 map 上点的大小。基本上，只想在 D3 中重新调整圆形 SVG 的大小。我只是想让所有的圆圈都变小，而不是试图创建比例符号。这是我的圈子:

var centroid = map.selectAll(".centroid")
    .data(centroid.features)
    .enter()
    .append("path")
    .attr("d",path)
    .attr("r", 100)
    .attr("class", function(d){
        return "centroid "+d.properties.info_city;

    })

它不起作用。我知道我不能在 CSS 中做到这一点，有没有想过如何在 javascript 中实现这一点？谢谢大家!

Answer 1

看看这个 plunker，让我们从那里继续:http://plnkr.co/edit/lKtCBKFS764MThajrqxX?p=preview

这张 map 的质心与您的相似。这些定义在:

 g.selectAll(".centroid").data(centroids)
    .enter().append("circle")
      .attr("class", "centroid")
      .attr("fill", fill)
      .attr("stroke", stroke)
      .attr("stroke-width", strokeWidth)
      .attr("r", radius)
      .attr("cx", function (d){ return d[0]; })
      .attr("cy", function (d){ return d[1]; });

通过将 .attr("r", radius) 行(在配置中为 6)更改为 .attr("r", 2) 你会得到小圆圈

这是更改后的一个:http://plnkr.co/edit/JUpMlnhZvZNacAIzI502?p=preview

我认为您正在尝试更改代码的错误部分，因为您应该更改圆形元素的“r”而不是“路径”元素(我认为路径元素甚至没有“r”属性) .

如果您的圆是由路径绘制的，那么您必须更改绘制这些圆的算法。