Question

我正在尝试构建一个基于实时数据源显示圈子的地球仪。创建数据后，将geoJSON圆圈添加到数组中，然后循环切片，一次只显示10个圆圈。前10个被绘制，但没有添加或删除，我不明白为什么。

https://jsfiddle.net/johndierks/vteL3Lpd/

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

var data = [];

for(var i=0;i<10;i++){
    data.push({
        lat: (Math.random()*45)-22,
        lon:  (Math.random()*45)-22,
        mag : 2,
        id: "id" + Math.round(Math.random()*1000000000).toString(36)
    });
}

var projection = d3.geo.orthographic()
    .scale(500)
    .translate([width / 2, height / 2])
    .rotate([0,0])
    .clipAngle(90);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);
var g = svg.append("g");
var circle = d3.geo.circle();

d3.json("world-110m.json", function(error, topology) {
    if(error){
        console.log(error);
    }
        g.selectAll("path")
            .data(topojson.object(topology, topology.objects.countries)
                    .geometries)
        .enter()
            .append("path")
            .attr("d", path);
});

var draw = function(){

    console.log(data[0].lat);

    var geocircles = svg.selectAll(".event-circle")
        .data(data);

    geocircles.exit().remove();

    geocircles.enter().append("path")
        .datum(function(d) {
             return circle.origin([d.lon, d.lat]).angle(d.mag)();
        })
        .attr("class", "event-circle")
        .attr("d", path)
        .attr("angle", 1);
};


var interval = setInterval(function(){
    data.push({
        lat: (Math.random()*45)-22,
        lon:  (Math.random()*45)-22,
        mag : 2,
        id: "id" + Math.round(Math.random()*1000000000).toString(36)
    });

    data = data.slice(1);

    draw();
},2000);

Answer 1

默认情况下，.data()根据元素的索引进行匹配。也就是说，第一个数据对应于第一个DOM元素，依此类推。特别是，这意味着如果您每次都提供相同数量的元素，则enter和exit选项将为空。

您可以通过将键功能传递给.data()：

来修改此功能

var geocircles = svg.selectAll(".event-circle").data(data, function(d) { return d.id; });

为什么在生成实时数据时未创建和删除我的D3.js圈？

1 个答案: