D3转换为FinitData错误

D3 transition isFinitDatae error

本文关键字:错误 FinitData 转换 D3      更新时间:2023-09-26

我是D3.js&我正在尝试为svg颜色更改添加一个转换,但我得到了未捕获引用错误:isFinitData未定义

需要改变颜色的svg圆圈设置如下:

var markers = mapContainer.selectAll("circle")
                    .data(mapLayer2.features)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d){ 
                        return projection([d.geometry.coordinates[0],d.geometry.coordinates[1]])[0];    
                    })                                          
                    .attr("cy", function(d){ return projection([d.geometry.coordinates[0],d.geometry.coordinates[1]])[1]; })
                    .attr("r", 5)
                    .style("fill", function(d,i){
                        if(d.properties.entero_100ml_1 > 35){
                            return "#ff0000"
                        } else {
                            return "#ffcc00"
                        }
                    });

我有多个按钮,颜色的变化取决于单击的按钮。我测试了多次点击所有按钮,颜色变化总是能正确地使用以下代码:

var updateMarkers = function(enteroString)
{
    markers.data(mapLayer2.features)
            .style("fill", function(d,i){
                var keyArray = d3.keys(d.properties); 
                var valueArray = d3.values(d.properties);
                for (var j = 0; j < keyArray.length; j++){
                    if(keyArray[j] === enteroString){
                        if(valueArray[j] > 35){
                                    return "#ff0000";
                                } else {
                                    return "#ffcc00";
                                }
                    }
                }
            });
}

…但当我添加过渡时,持续时间&只有当第一次单击按钮,并且抛出"Uncaught ReferenceError:isFinitData is not defined"时,缓和转换才有效:

var updateMarkers = function(enteroString)
{
    markers.data(mapLayer2.features)
            .transition() 
            .duration(500) 
            .ease("quad")
            .style("fill", function(d,i){
                var keyArray = d3.keys(d.properties); 
                var valueArray = d3.values(d.properties);
                for (var j = 0; j < keyArray.length; j++){
                    if(keyArray[j] === enteroString){
                        if(valueArray[j] > 35){
                                    return "#ff0000";
                                } else {
                                    return "#ffcc00";
                                }
                    }
                }
            });
}

有没有关于如何修复错误的想法,因为这在没有过渡的情况下是有效的?

感谢您的帮助。

更新:&这里是updateMarkers的调用位置:

chartContainer.selectAll("#xAxis text") 
        .attr("transform", function(d) {
          return "translate(10,0)";
        })
        .style("cursor", "pointer")
        .on("click", function(d,i) {
            var num = i + 1; 
            var numString = num.toString();
            var enteroString = "entero_100ml_" + numString;
            updateMarkers(enteroString);
        });

"isFinitData"是我测试的D3版本中的一个拼写错误。在最新版本中,它是"isFinite",并且转换正在工作。