Changing arc outer radius based on data on d3.js

Question

First time user, so please excuse any accidental breach in protocol. I'm trying to take the arcs that form the outer ring of a D3 generated chord diagram and turn them into a bar graph of sorts, each groups' arc having a different outer radius. I haven't found anything in the D3 documentation suggesting this is impossible, but I haven't found a solution yet. The tricky part seems to be getting a function to execute and retrieve the relevant number from the csv file I have it stored in, and changing the arc's outer radius accordingly. Here is what I have so far (Modified from "Andrew RP's Andrew's Chord Example"):

d3.csv('teams.csv', function(cities) {
d3.json('matrix1.json', function(matrix) {

// Compute the chord layout.
layout.matrix(matrix);

// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);


// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(innerRadius + function(d, i) {return cities[i].conservation;}))
.style("fill", function(d, i) { return cities[i].color; });

But when I run the program it doesn't display the outer arc and provides error messages in the browser's developer pane saying that it can't parse "d", and showing that its having trouble executing the function inside outerRadius(…). Any help or advice would be greatly appreciated. Thanks!

Answer 1

This piece of code is incorrect:

.outerRadius(innerRadius + function(d, i) {return cities[i].conservation;})

You are trying to sum innerRadius + reference to function. function(d, i) {return cities[i].conservation;} is only a pointer reference to this function not a function call. This function is not called directly, it is only passed as argument to outerRadius which executes it later. In your example, there is called innerRadius + function(d, i) {return cities[i].conservation;}. They are of incompatible types (innerRadius is maybe integer and function(... is of type function) so there is called method .toString() and you pass the string "100function (d, i) {return cities[i].conservation;}" to .outerRadius where 100 is value of innerRadius variable. The code should be:

.outerRadius(function(d, i) {return innerRadius + cities[i].conservation;})