Question

我有一个函数，使用D3将初始点数组加载到地图上：

  var fires = []; //huge array of objects 

  function update(selection) {

    feature = g.selectAll("path")
     .data(selection);

    feature.attr("class", "update");

    feature.enter().append("path")
     .attr("class", "enter")
     .style("fill", function(d) {return colorScale(d.area)});

    feature.exit().remove(); 
  }

我最初使用大型数组调用它：

update(fires);

我还有一个直方图，可以让我根据年份缩小选择范围。使用D3画笔，在'brushend'上我调用了一个名为brushed的函数：

function brushed() {
    if (!d3.event.sourceEvent) return; // only transition after input
    var extent0 = brush.extent();
    startYear = Math.floor(extent0[0]);
    endYear = Math.floor(extent0[1]);

    var selectedFires = fires.filter(function(fire) {
        if(fire.year >= startYear && fire.year <= endYear) return fire;
    });

    console.log(selectedFires.length); //does reflect the proper amount of elements

    update(selectedFires);
}

当我缩小选区时，地图上的点会按预期消失。当我加宽它时，点/元素不会返回。数组中包含正确的元素，它们只是没有附加到SVG。

我遗漏了一些基本的东西，就像我看到的例子一样：http://bl.ocks.org/mbostock/3808218似乎附加元素就好了。

Answer 1

如果没有看到剩余的代码（真正有用），并专注于您的选择，请尝试以下方法：

function update(selection) {
    // binding the data
    feature = g.selectAll(".path")
        .data(selection);

    // exit selection
    feature
      .exit()
      .remove();

    // enter selection
    feature
      .enter()
      .append("path")
        .attr("class","path");

    // update selection
    feature
        .style("fill", function(d) {return colorScale(d.area)});

    // update selection
    feature
        .style("fill", function(d) {return colorScale(d.area)})
        .attr("d",path); // this was the missing piece!
}

注意：您还要注释掉硬编码画笔范围的位置：

//brush
var brush = d3.svg.brush()
    .x(areaYearScale)
    //.extent([1984, 2013]) // comment this out
    .on("brushend", brushed);

如何动态更新D3中显示的元素

1 个答案: