javascript - 更新圆半径并在 d3.js 中对其进行动画处理

Question

我在 csv 文件的 map 上绘制了 n 个圆，我想在 2 年的容量时间内更新圆的半径。我的 csv 文件格式是:

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]。

这是我的 fiddle -> https://jsfiddle.net/7zumngdq/72/

Answer 1

这是我的方法(我希望这是你试图解决的问题)，尽管你可能需要两个以上的数据值才能工作，因为我使用了线性刻度。让我解释一下:

首先，我创建了一个包含您的数据的新数据结构(我只是不喜欢带有斜杠的键 :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];
  });

为元年值制作动画

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]);
      });
  }
});

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