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

时间:2018-02-06 17:53:45

标签: javascript d3.js svg

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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