在D3中重新调整圆形SVG的大小

Question

我正在尝试在D3中更改地图上点的大小。基本上，只想在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

看看这个羽毛球员，让我们继续前进：http://plnkr.co/edit/lKtCBKFS764MThajrqxX?p=preview

这张地图有类似你的质心。这些定义如下：

 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

我认为您正在尝试更改代码的错误部分，因为您应该更改＆＃34; r＆＃34;圈子元素不是＆＃34;路径＆＃34;元素（我不认为path元素甚至具有＆＃34; r＆＃34;属性）。

如果您的圈子是通过路径绘制的，那么您必须更改绘制这些圈子的算法。

Answer 2

您正在使用质心坐标附加path，就好像它是一个圆圈一样。这是不常见的，最常见的选择是使用SVG circle，但它没关系......实际上，Bostock做同样的here。

唯一的问题是，因为它们是paths，而不是circles，更改半径（r）将无效。因此，要更改这些＆＃34;圈子的大小，您必须这样做：找到您的d3.geo.path并向其添加pointRadius。

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

someValue当然是一些符合您需求的数值。

PS：为了使其正常工作，TopoJSON中的types必须为"Point"或"MultiPoint"。