我正在尝试添加不同颜色的渐变(用于表示调查中记录的不同答案的百分比)到svg形状(在这种情况下,形状是用户点击的国家/地区)。 I want it to look like this(请忽略可怕的颜色选择)。
但是,当每个答案的百分比数据都是硬编码时(图片中右侧可见),并且未使用调查数据从csv文件中获取,此截图是在此处截取的。因此,我编写了这段代码,以根据调查中的数据生成渐变。它计算每个答案收到的百分比,并创建两个偏移属性,定义该特定答案的边界(然后应用于渐变svg)。最后,此渐变应用于用户点击的国家/地区。
function calculateGrad(csvData, noOfQuestions, chosenCountry){
var total = 0
for (var i = 0; i < noOfQuestions; i++) {
total += parseInt(csvData[i][chosenCountry])
}
var grad = svg.append("defs")
.append("linearGradient")
.attr("id", "grad")
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "100%")
.attr("y2", "0%")
totalPercentFilled = 0
counter = 0
for (var i = 0; i < noOfQuestions; i++) {
var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
if (i == 0) {
grad.append("stop").attr("offset", "0%").attr("stop-color", randomColor)
var prevColor = randomColor
counter += 1
}
else {
grad.append("stop").attr("offset", totalPercentFilled).attr("stop-color", randomColor)
var prevColor = randomColor
counter += 1
}
grad.append("stop").attr("offset", (totalPercentFilled + (parseInt(csvData[i][chosenCountry])/parseInt(total))*100)).attr("stop-color", prevColor);
totalPercentFilled += (parseInt(csvData[i][chosenCountry])/parseInt(total)*100)
}
console.log(grad)
// console.log("Number of loops made: " + counter)
// console.log("Number of Q:s: " + noOfQuestions)
g.selectAll("#" + country.id).style("fill", "url(#grad)")
console.log("Gradient applied")
虽然这段代码似乎生成完全相同的渐变(对我而言),it results in the country getting filled with just one color(渐变的第一个)。
我无法弄清楚为什么会发生这种情况,因为两个示例中控制台中记录的渐变看起来与我相同。如果有人知道问题是什么,我将永远感激一些指导。
如果我需要提供更多详细信息,请告诉我。
答案 0 :(得分:0)
在示例D3屏幕截图中,您可以看到您没有将%
单位百分比附加到渐变stop
。渐变停止的默认单位是objectBoundingBox
,单位从0到1运行。
所以你的渐变可能就在那里,它只是你预期的100×
。您只能看到(非常大)渐变的一个乐队。