Reputation: 1833
I'm trying to change the size of dots on a map in D3. Basically, just want to re-size the circle SVG in D3. I just want all the circles to be smaller, not trying to create proportional symbols. Here's my circles:
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;
})
It's not working. I know that I can't do this in CSS, any thoughts on how to accomplish this in javascript as I'm trying to do? Thanks all!
Upvotes: 2
Views: 893
Reputation: 102219
You are using the centroid coordinates to append a path
as if it was a circle. This is not usual, the most common choice would be using a SVG circle
, but it's OK... actually, Bostock does the same here.
The only problem is, as these are paths
, not circles
, changing the radius (r
) will have no effect. So, to change the size of these "circles", this is what you have to do: find your d3.geo.path
and add pointRadius
to it.
var path = d3.geo.path()
.projection(projection)
.pointRadius(someValue);
Where someValue
is, of course, some numeric value that fits your needs.
PS: for this to work properly, the types
in your TopoJSON have to be "Point"
or "MultiPoint"
.
Upvotes: 1
Reputation: 40677
Take a look at this plunker and let's move on from there: http://plnkr.co/edit/lKtCBKFS764MThajrqxX?p=preview
This map has similar centroids like yours. These are defined in:
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]; });
By changing .attr("r", radius)
line (which is 6 in the config) to .attr("r", 2)
you will get smaller circles
Here's the changed one: http://plnkr.co/edit/JUpMlnhZvZNacAIzI502?p=preview
I think you are trying to change the wrong part of the code since you should change the "r" of the circle elements not the "path" element ( I don't think path element even has a "r" attribute).
If your circles are drawn by a path then you must change the algorithm that draws those circles.
Upvotes: 1