Javascript 使用CSV数据设计拓扑几何图形的D3 SVG可视化

我正在用D3构建一个可视化，我想根据我从CSV文件导入的变量值动态设置SVG元素的样式

我当前的方法如下：我从Topojson文件导入几何体数据，如下所示：

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; })

我从CSV文件导入属性数据，并将各种值和关联的类/类别附加到DOM元素，如下所示：

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(...

在上述片段中，area表示一个国家的面积，area_class表示一个国家所属的大小级别，例如，在预先计算的自然保护区分类中，area_class可能介于1到5之间。从概念上讲，几何图形和属性可以分别通过d.id和d.ISO_A3链接

我不确定这种方法是否好，但我想将几何体和属性数据分开，以便前者可以重用，这样我可以在以后通过向CSV文件添加变量而不干扰Topojson文件，轻松插入更多属性数据

现在，我在使用area_类设置SVG元素的样式时遇到了问题。我想我可以使用一个下拉菜单，它可以让我更改用于设置SVG元素主题样式的变量。SVG元素的类将发生变化，并使用CSS根据该类设置样式。一旦更改，下拉菜单将触发以下命令：

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);
    });
}

在控制台上，这将产生我所期望的结果，例如：

class_1
2

i、 例如，此SVG元素拥有的上一个类以及从CSV文件导入并作为属性附加到SVG元素的新类的数字部分。但是，该函数实际上无法影响SVG元素的类，从而影响其外观

我不确定这哪里出了问题，也不确定我的方法是否可以从使用单独的Topojson和CSV文件开始，以及如何将CSV中的值附加到SVG元素

---

非常感谢您的意见，谢谢

如果是的话，您使用的是jquery，那么它不适用于SVG类。看起来你的.addClass调用中有一个额外的.attr-那不是$this.addClassclass_uuz+主题吗？@RobertLongson:谢谢，我不知道@拉斯克托夫：谢谢。你完全正确。将给出预期结果的是$this.addClassclass U3;+$this.attrtheme。但是Robert指出的jQuery和SVG类的问题意味着我需要找到另一种解决方案。非常感谢你们两位的帮助！我最终使用原生D3来更改类，而不是依赖jQuery。请参见@RobertLongson的注释。这是我想到的，它似乎起作用了，所以现在还不让我把它作为答案发布：函数更改主题下拉列表{var theme=dropdown.options[dropdown.selectedIndex].value；d3.selectAllpath[id^='c'].eachfunction{var item=d3.selectthis；item.attr'class'，'class_'+item.attrtheme；}；}