Question

我正在尝试添加不同颜色的渐变（用于表示调查中记录的不同答案的百分比）到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（渐变的第一个）。

我无法弄清楚为什么会发生这种情况，因为两个示例中控制台中记录的渐变看起来与我相同。如果有人知道问题是什么，我将永远感激一些指导。

如果我需要提供更多详细信息，请告诉我。

Answer 1

在示例D3屏幕截图中，您可以看到您没有将%单位百分比附加到渐变stop。渐变停止的默认单位是objectBoundingBox，单位从0到1运行。

所以你的渐变可能就在那里，它只是你预期的100×。您只能看到（非常大）渐变的一个乐队。

使用d3生成渐变并应用于svg形状

1 个答案: