1

我正在使用 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_classSVG 元素样式时遇到了麻烦。我想我可以使用一个下拉菜单，它可以让我更改用于设置 SVG 元素（主题）样式的变量。SVG 元素的类会改变，并且会根据该类使用 CSS 设置样式。onchange，下拉菜单会触发：

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

即，该 SVG 元素具有的前一个类以及从 CSV 文件导入并作为属性附加到 SVG 元素的新类的数字部分。但是，该函数实际上并没有影响 SVG 元素的类，因此也影响了它的外观。

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

我感谢任何输入，谢谢！

4

0 回答 0