Question

我正在尝试合并这些圈子，但我不断得到一个累积圈子的图表，而不是在图表中移动的圈子？

我错过了什么？

我已附上以下代码。此功能称为updatechart。它对应一个滑块。所以每当我在屏幕上移动滑块时。它对应的年份是更新的圆形数据应该移动的地方。

var filteredyears = d3.nest()
     .key(function(d) {
       if(year === d.year){
         return d;
     }
   }).entries(globaldataset);


var circled = svg.selectAll('.countries')
 .data(filteredyears[1].values);

var circledEnter = circled.enter()

circled.merge(circledEnter);

circledEnter.append("circle").attr("cx", function(d) {
      return xScale(d.gdpPercap);
    })
    .attr("cy", function(d) {
      return yScale(d.lifeExp);
    })
    .attr('transform', "translate("+[40,30]+")")
    .attr( 'r', function(d) {
      return rScale(d.population) / 100})
    .style("fill", function(d) {
      if(d.continent == 'Asia'){
        return '#fc5a74';
      } else if (d.continent == 'Europe') {
        return '#fee633';
      } else if (d.continent == 'Africa') {
        return '#24d5e8';
      } else if (d.continent == 'Americas') {
        return '#82e92d';
      } else if (d.continent == 'Oceania') {
        return '#fc5a74';
      }
    })
    .style("stroke", "black");
  circled.exit().remove();

Answer 1

使用merge()方法有几个问题，最初确实很难理解。

首先，您必须重新分配您的选择：

circled = circled.merge(circledEnter);

现在，从现在开始，将更改应用于circled，而不是circledEnter：

circled.attr("//etc...

除此之外，您的exit选项无法正常工作，因为您已在合并的选择中调用它。把它放在merge。

之前

最后，append在合并之前转到circledEnter选项，以及所有不会改变的属性。

这是一个非常基本的演示，显示它：

＆＃13;

var svg = d3.select("svg"),
  color = d3.scaleOrdinal(d3.schemeCategory10);

render();

function render() {
  var data = d3.range(~~(1 + Math.random() * 9));
  var circles = svg.selectAll("circle")
    .data(data);
  circles.exit().remove();
  var circlesEnter = circles.enter()
    .append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
      return color(d);
    });
  circles = circlesEnter.merge(circles);
  circles.attr("cx", function() {
      return 5 + Math.random() * 290
    })
    .attr("cy", function() {
      return 5 + Math.random() * 140
    });
}

d3.interval(render, 1000);

＆＃13;

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

＆＃13;

圆圈不断累积，并没有正确合并

1 个答案: