How can I change the radius and opacity of a circle in d3?

Spread the love

Question Description

I’m working on a visualization in d3. It involves drawing circles over countries a map and then scaling the sizes of the circles to correspond with data about those countries. I want to change the opacity as the radius of the circles gets larger, but the code I have isn’t working, despite lots of experimentation and tweaking. Can someone point out what I’m missing here?

I’ll post the entire code below, just in case. Scroll down to the showJan function to see what I’ve tried to do (which isn’t working). Many thanks in advance.

January February March April May June July August September October November December

Practice As Follows

After the transition and duration, you must update the attributes that will change. A code sample:

var svg = d3.select("body").append("svg");

svg
  .attr('id','mySVG')
  .attr('width', '100%')
  .attr('height', '100%');

// Set the initial properties of the circles
var circle = svg.selectAll('circle')
    .data([2, 5, 8])
    .enter()
    .append('circle')
        .attr('cx', function(item) { return item; })
        .attr('cy', function(item) { return item; })
        .attr('r', 0)
        .attr('fill', '#babdb6');

// Update the attributes that will change
circle
    .transition()
    .duration(2000)
        .attr('fill-opacity', 0.2)
        .attr('r', function(item) { return 100 * item; });

I wrote a minimal example that can help you. http://jsfiddle.net/pnavarrc/udMUx/.

Leave a Comment