Question

我有一个d3.js映射，它将根据时间范围滑块更新点的不透明度。问题是，如果我将点的初始不透明度设置为某个值，那么它将变为全局值，并且更新不透明度的更新功能将不起作用。下面的代码：

 //Build time-slider in HTML

 <input id="timeslide" type="range" class="slider" min="0" max="25" value="0" step="1"   /><br>

 //Set values for time range slider
var inputValue = null;
var years = ["1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009", "2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"];

//load in the points and style
var feature = mapG.selectAll("circle")
        .data(SFData)
        .enter().append("circle")   
        .style("opacity", initialDateMatch) //How should I write this function?

    // when time slider input, call 'update' function
    d3.select("#timeslide-leaflet").on("input", function() {        
        update(+this.value, currentValue);   
    });

 //'update' function to update points' opacity
function update(value, currentValue) {

        //do some things to check current value of time slider to determine opacity
        document.getElementById("range-leaflet").innerHTML=years[value]
        inputValue = years[value];
        d3.selectAll(".features")
            .attr("opacity", dateMatch)

}

// 'Function to match time slider value to data properties value, to determine opacity
function dateMatch(data, value) {
    var date = (data.properties.Sign_Date);
    var year = date.substring(0, 4);
    var inputValueInt = parseInt(inputValue, 10);
    var yearInt = parseInt(year, 10);

    if (yearInt <= inputValueInt) {
        //console.log('match!'+ year)

     return ".7";
    } else {
        return "0";
    };
}

我希望显示在地图上的所有点的“默认”不透明度为“ .7”。相反，现在，由于我最初没有设置不透明度，所以它们都为100％不透明。其他一切都工作正常，如何在实例化滑块输入和调用update函数之前获取所有要设置样式的点呢？预先感谢！

在d3地图上设置点的初始“默认”不透明度

0 个答案: