0
我有一个SVG,我在Inkscape中做了,现在我想根据数据集值填充SVG中的颜色,但不知何故我不能设法显示一个简单的填充。不知道如何做到这一点。SVG不会显示填充d3.js
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
}
]
.enter()。append('path')不起作用。控制台上没有错误。 – Imo
我错过了一件事。由于您正在追加路径元素,因此您需要设置“d”属性(selection.attr('d','路径字符串'))。你可以在这里阅读它https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths – sergeyz
什么是'路径字符串'在这里?我想改变d的值只是它的风格 – Imo