CODEWITHSUNDEEP
javascriptd3.js
DiamondJoe12
DiamondJoe12

Reputation: 1833

Re-sizing circle SVG in D3

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!

enter image description here

Upvotes: 2

Views: 893

Answers (2)

Gerardo Furtado
Gerardo Furtado

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

eko
eko

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

Related Questions