更新圆弧半径并在d3.js中设置动画效果

问题描述：

我从csv文件的地图上绘制了n个圆，并且我想更新2年容量时间内圆的半径。我的CSV文件的格式是：更新圆弧半径并在d3.js中设置动画效果

ID，纬度，经度，CapaYr1，CapaYr2

1，38.957，-122.642，94261，288839.2857

2，40.718，-122.42，3690993.143 3799364.714。

下面是我的代码：

g.selectAll("circle") 
       .data(result) 
       .enter() 
       .append("circle") 
       .attr("r", 0) 
       .attr('cx', function(d) { 
        return projection([d.Longitude, d.Latitude])[0]; 
       }) 
       .attr('cy', function(d) { 
        return projection([d.Longitude, d.Latitude])[1]; 
       }) 
       .attr('r', function(d){ 

        var hd = d3.keys(d); 
        var radDataSet = []; 


        for (var i = hd.length - 1; i >= 0; i--) { 
         if((hd[i] === "ID") || (hd[i] === "Latitude") || (hd[i] === "Longitude")){ 
         }else{ 
          radDataSet.push(Math.round(Math.sqrt((d[hd[i]]/30000)))); 
         } 
        } 

        radDataSet.forEach(function(d, i) { 
          g.selectAll("circle").transition().duration(2000).delay(i * 1000) 
          .attr("r", d); 
        }); 

       });

所以radDataSet阵列上面的代码有CapaYr1和CapaYr2值。所有圆的半径都在更新，但所有的圆都有相同的radSet值。那么我怎么能这样做，即每个圆形转换具有不同的值，取决于csv文件中每行的计算radDataSet值。

radSet每行的值是[3,2]和[11,11]。其更新圈半径与[11,11]。

这里是我的小提琴 - >https://jsfiddle.net/7zumngdq/72/

答

这里是我的做法（我希望这是你试图解决这一问题），虽然你可能需要两个以上的数据值，为它，因为我用的线性工作规模。让我来解释：

首先我创建了一个包含您的数据（我只是不喜欢用斜杠键：S）新的数据结构

var parsed = ca2.map(function(d, i) { 
    return { 
    firstYear: +d['2000/01/31'], 
    secondYear: +d['2000/02/29'], 
    id: d['ID'], 
    lat: +d['Latitude'], 
    lng: +d['Longitude'] 
    }; 
}); 
// Pushing a new value in order to have at least one circle that 
// will change radius 
parsed.push({ 
    firstYear: 2678933, 
    secondYear: 80000000, 
    id: 'DOVAL', 
    lat: 35.2931129, 
    lng: -119.465589 
})

允许设置一个规模采取的护理半径尺寸：

var max = d3.max(parsed, function(d) { 
    return d.firstYear 
}); 
var min = d3.min(parsed, function(d) { 
    return d.firstYear 
}); 
var linearScale = d3.scale.linear() 
    .domain([min, max]) 
    // If we just had two values all our circles would end up being the smallest 
    // and largest values of the range defined below 
    .range([5, 25]);

现在，让我们添加的圆圈：

var circles_first = g.selectAll(".circle-year") 
    .data(parsed) 
    .enter() 
    .append("circle") 
    .attr('class', 'circle-year') 
    .attr("r", 0) 
    .attr('cx', function(d) { 
    return projection([d.lng, d.lat])[0]; 
    }) 
    .attr('cy', function(d) { 
    return projection([d.lng, d.lat])[1]; 
    });

制作动画的第一咋AR值

g.selectAll(".circle-year") 
    .transition().duration(2000).delay(1000) 
    .attr('fill', 'red') 
    .attr('r', function(d) { 
    return linearScale(d.firstYear); 
    });

最后制作动画，第二年价值

setTimeout(function() { 
    var maxS = d3.max(parsed, function(d) { 
    return d.secondYear 
    }); 
    var minS = d3.min(parsed, function(d) { 
    return d.secondYear 
    }); 
    linearScale.domain([minS, maxS]); 
    g.selectAll(".circle-year") 
    .transition().duration(2000).delay(1000) 
    .attr('fill', 'green') 
    .attr('r', function(d) { 
     return linearScale(d.secondYear); 
    }); 
}, 8000)

工作的jsfiddle：https://jsfiddle.net/e693hrdL/

更新：

这里有一个更新的版本应该工作，唯一的问题是你的数据在你的'SHA'数据元素中有一个巨大的斜率，因此数据变化很小。

d3.csv('./ca.csv', function(ca2) { 
    console.log('ca2', ca2); 
    var parsed = ca2.map(function(d, i) { 
    var dates = d3.keys(d).filter(function(key) { // get all date keys 
     if (key === 'ID' || key === 'Latitude' || key === 'Longitude') { 
     return false; 
     } 
     return true; 
    }); 
    var dateValues = dates.map(function(date) { // Add them as an array 
     // if (d.ID === 'SHA') { 
     // return +d[date] - 2000000; 
     // } 
     return +d[date]; 
    }); 
    return { 
     dates: dateValues, 
     id: d['ID'], 
     lat: +d['Latitude'], 
     lng: +d['Longitude'] 
    }; 
    }); 
    console.log(parsed); 
    var circles_first = g.selectAll(".circle-year") 
    .data(parsed) 
    .enter() 
    .append("circle") 
    .attr('class', 'circle-year') 
    .attr("r", 0) 
    .attr('cx', function(d) { 
     return projection([d.lng, d.lat])[0]; 
    }) 
    .attr('cy', function(d) { 
     return projection([d.lng, d.lat])[1]; 
    }); 

    parsed[0].dates.forEach(function(d, i) { // call function based on index! 
    setTimeout(function() { 
     changeRadius(i); 
    }, i * 500); 
    }) 
    var linearScale = d3.scale.linear() 
    .range([0, 25]); 

    function changeRadius(index) { 
    var maxS = d3.max(parsed, function(d) { 
     return d.dates[index]; 
    }); 
    var minS = d3.min(parsed, function(d) { 
     return d.dates[index]; 
    }); 
    console.log(minS, maxS) 
    linearScale.domain([minS, maxS]); 
    g.selectAll(".circle-year") 
     .attr('fill', function(d) { 
     return 
     }) 
     .attr('r', function(d) { 
     return linearScale(d.dates[index]); 
     }); 
    } 
});

工作plnkr：https://plnkr.co/edit/6GH2VWwtUp5DHOeqrKDj?p=preview

更新圆弧半径并在d3.js中设置动画效果

相关推荐