Question

我的目标是允许最终用户使用点击运行的更新功能在两个直方图之间切换。

我可以使用以下两个函数（每个数据集一个）成功更新直方图。但是，我只能弄清楚如何 1）删除现有的rects并用更新的数据以非常突然的方式替换它们或者 2）在两个数据集之间平滑地设置转换动画，但无法删除第一组rects。

可以在此处看到D3可视化：http://jackielu.github.io/d3-hist-v3/

点击＆＃34; Percent Impervious＆＃34;直方图更新正确，但突然和不优雅。当你点击＆＃34;百分比冠层＆＃34;直方图更新有一个很好的过渡但前一组rects仍然是

当＆＃34; Percent Impervious＆＃34;时运行的代码点击如下：

function drawChartImperv(data) {

  //grab the values you need and bin them
  histogramData = d3.layout.histogram()
    .bins(xScale.ticks(10))
    (data.features.map(function (d) {
        return d.properties.Imperv_P}));

  window.histogramData = histogramData;

  yScale.domain([0, d3.max(histogramData, function(d) { return d.y; })])
    .nice();
  yAxis.scale(yScale);
  yAxis2.call(yAxis);

  xAxis2.select(".xLabel")
    .text("Impervious Percentage")

  bar.remove();

  //bind the data once
  bar = svg.selectAll(".bar")
      .data(histogramData)

  //handle new elements
  bar.enter()
      .append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

  bar.append("rect")
      .attr("x", 0)
      .attr("y", function (d) { (height - padding) - yScale(d.y);})
      .attr("width", xScale(histogramData[0].dx)/2)
      .attr("height", function (d) { return (height - padding) - yScale(d.y); })
      //color the bars using the color function for the layer
      .style("fill", "#309195")

    // handle updated elements
  bar.transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

    // handle removed elements
  bar.exit()
    .remove();
}

允许平滑过渡但不删除旧版本的代码是：

function drawChartCan(data){

  //grab the values you need and bin them
  histogramData = d3.layout.histogram()
    .bins(xScale.ticks(10))
    (data.features.map(function (d) {
        return d.properties.Can_P}));

  window.histogramData = histogramData;

  yScale.domain([0, d3.max(histogramData, function(d) { return d.y; })])
    .nice();
  yAxis.scale(yScale);
  yAxis2.call(yAxis);


  xAxis2.select(".xLabel")
    .text("Canopy Percentage")

  //bind the data once
  bar = svg.selectAll(".bar")
      .data(histogramData)

  //handle new elements
  bar.enter()
      .append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });

  bar.append("rect")
      .attr("x", 0)
      .attr("y", function (d) { (height - padding) - yScale(d.y);})
      .attr("width", xScale(histogramData[0].dx)/2)
      .attr("height", function (d) { return (height - padding) - yScale(d.y); })
      //color the bars using the color function for the layer
      .style("fill", "#41ab5d")

    // handle updated elements
  bar.transition()
    .duration(3000)
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; })

    // handle removed elements
  bar.exit()
    .remove();
}

两个代码块之间的唯一区别是在drawChartImperv函数中，在更新Y和X轴之后有一个bar.remove()语句。

我怀疑bar.remove()语句在drawChartImperv函数中的位置错误，但我无法确定它应该在哪里，以便我可以在两组之间进行很好的转换吧，AND删除旧的rects？

完整代码在此处：https://github.com/jackielu/d3-hist-v3

所有建议和提示将不胜感激。

麻烦动画转换和删除D3中的元素

0 个答案: