Question

我有一个我在inkscape中制作的SVG，现在我想根据数据集值填充svg中的颜色，但不知何故我无法显示甚至是简单的填充。不知道如何做到这一点。

var svg_0 = d3.xml("continents_clean.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode);



var dataset;

function checkIt(data){
for (var i in data) {
            var data_clean;
            data_clean = data[i].Total
            dataset = data_clean
            fillSvg();

        }

        }

d3.json("data.json", checkIt);


function fillSvg(){
  var svg = d3.select("#level_0")
            .selectAll("path")
            .data(dataset)
            .enter()
            .append("path")
            .style("fill", "purple");
            console.log(svg)
}
});

数据

[{
    "Continent":"Asia.Oceania",
    "Country_Names":"Yemen",
    "Total":20
  },
  {
    "Continent":"Misc",
    "Country_Names":"World marine bunkers",
    "Total":602.2
  },
  {
    "Continent":"Misc",
    "Country_Names":"World aviation bunkers",
    "Total":477.8
  }
]

Answer 1

我误解了你，所以忽略我之前写的关于.enter（）的内容。追加（＆＃39;路径＆＃39;）。

调用您选择的每个方法，确保选择路径并且它们对应于正确的json数据对象。如果使用console.log的回调没有被触发，这意味着你没有实际选择路径（因为查询字符串错误）或者你的数据集数组没有json对象

.style('stroke', 'purple')

如果您调用的回调被调用但颜色未被更改，请转到开发人员工具的“元素”面板，然后检查{{1}}是否实际设置为紫色。

尝试更改笔触颜色{{1}}并查看它是否更改了路径的笔触。

祝你好运！

SVG不会显示填充d3.js

1 个答案: