用d3生成svg形状并应用梯度

Question

我正在尝试将不同颜色的渐变（意在象征一个调查中记录的不同答案的百分比）添加到一个svg形状（在本例中，该形状是用户点击过的一个国家）。我希望它看起来像这样（请忽略糟糕的颜色选择）。

然而，这个屏幕截图是在每个答案的百分比数据被硬编码时拍摄的（图中右侧可见），而不是从带有调查数据的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")

虽然这段代码似乎生成了完全相同的渐变（对我来说），但它的结果是国家只填充了一种颜色（渐变的第一种）。

我不明白为什么会发生这种情况，因为两个示例中登录在控制台中的渐变在我看来都是一样的。如果有人知道问题出在哪里，我会永远感激你的指导。

如果我需要提供更多的细节，也请让我知道。

Answer 1

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

所以你的梯度可能在那里，它只是100×从你想要的。你只看到一条（非常大的）梯度带。