Question

我有一个等间距值的数组，我用它来绘制同心圆。我想使用一种散发效果，实质上，一旦其值超过最大值就移除最外面的圆圈，并在中心添加一个新的圆圈以进行补偿。我不确定对数据集进行操作以删除和添加新的圆圈。

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("body").append("svg");
var w = window.innerWidth;
var h = window.innerHeight;
var separation = Math.min(50, w/12);
var n=Math.floor((w/2)/separation);
var ellipse=new Array(n);
for(var i=1;i<=n;i++){
 ellipse[i-1]=(i*separation);
}

svg.attr("width", w).attr("height", h);
var g = svg.append("g");

var e=g.selectAll("ellipse")
  .data(ellipse)
  .enter()
  .append("ellipse")
  .attr("cx", w/2)
  .attr("cy", h/2)
  .attr("rx",0)
  .attr("ry",0)
  .transition()
  .duration(5000)
  .attr("rx", function(d,i){return ellipse[i];})
  .attr("ry", function(d,i){return ellipse[i]/5;});

  loop();
  function loop(){
    e.transition()
    .attr("rx", function(d,i){
           return ellipse[i]+separation;
         })
    .attr("ry", function(d,i){
           return (ellipse[i]+separation)/5;
         })
    .on("end",loop());
    }
  </script>

Answer 1

你可以使用remove（）。exit（）和每个环的enter（）。append（）选择来接近它 - 但基本上你在屏幕上总是有相同数量的环。为什么不回收相同的元素？当大小达到阈值时，将其重置为零，或其他一些起始值？

有些事情：

＆＃13;

var scale = d3.scaleLinear()
  .range(["orange","steelblue","purple"])
  .domain([0,60]);
  
var data = [0,10,20,30,40,50,60];

var width = 200;
var height = 200;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);
  
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r",function(d) { return d; })
  .attr("transform","translate(80,80)")
  .attr("fill","none")
  .style("stroke-width","4")
  .style("stroke",function(d) { return scale(d) });
  
function transition() {
  // Update data, max d is 60:
  data = data.map(function(d) { return d == 60 ? 0 : d + 10});
  
  var i = 0;
  // Grow circles
  circles
     .data(data)
     .filter(function(d) { return d > 0 })
     .transition()
     .ease(d3.easeLinear)
     .attr("r", function(d) { return d; })
     .style("stroke", function(d) { return scale(d) })
     .style("opacity",function(d) { return d == 60 ? 0 : 1 }) 
     .duration(1000)
     .on("end",function(){if(++i==circles.size()-1) { transition(); } });
    
     
  // Reset circles where r == 0
  circles
    .filter(function(d) { return d == 0 })
    .attr("r", 0)
    .style("opacity",1)
    .style("stroke",function(d) { return scale(d); });
     
    
}

transition();

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

请注意，.on("end",...会触发每个元素的转换结束 - 这就是为什么我会在再次运行转换函数之前查看所有元素是否已完成转换的原因。

同心圆圈d3

1 个答案: