javascript - D3 SVG visualization using CSV data to style Topojson geometries -

i'm building visualization d3 in dynamically style svg elements according variable values i've imported csv file.

my current approach looks this: import geometry data topojson file so:

d3.json("geoms.json", function(error, data) {     var path = d3.geo.path()                  .projection(projection.translate([0.5*width, 0.5*height])); svg.selectall(".map")        .data(topojson.object(data, data.objects.map).geometries)        .enter().append("path")        .attr("id", function(d) { return "c_" + d.id; }) 

and import attribute data csv file , attach various values , associated classes/categories dom elements this:

d3.csv("data.csv", function(data) {     data.foreach(function(d) {          d3.selectall("#c_" + d.iso_a3)           .attr("name", d.name)           .attr("area", parsefloat(d.area))           .attr("area_class", d.area_class)           .attr(... 

in above snippet, area denotes area of country , area_class denotes size class country falls (e.g., area_class fall between 1 , 5 in natural breaks classification pre-computed). conceptually, geometries , attributes can linked via d.id , d.iso_a3, respectively.

i'm not sure if approach 1 or not, wanted keep geometry , attribute data separate, former re-usable , can plug-in more attribute data later on adding variables csv file , not messing topojson file.

i have troubles using area_class style svg elements. thought use dropdown menu, let me change variable used style svg elements (themes). svg element's class change , styled according class using css. onchange, dropdown menu fires this:

function change_theme(dropdown) {     var theme = dropdown.options[dropdown.selectedindex].value;     $("[id^='c_']").each(function(index){         console.log($(this).attr('class'));         console.log($(this).attr(theme));         var prev_class = $(this).attr('class');         $(this).addclass($(this).attr("class_" + theme)).removeclass(prev_class);     }); } 

on console, produces expect e.g. like:

class_1 2 

i.e., previous class svg element had , numerical part of new class imported csv file , attached svg element attribute. however, function fails affect class of svg elements , appearance.

i'm not sure goes wrong , if approach okay start (using separate topojson , csv files , how attach values csv svg elements)?

i appreciate input, thanks!