Question

我有一个d3地图，附有一些圆圈和正方形。形状代表来自不同年份的数据，我有一个选择器，允许用户选择年份，这使得那一年的形状通过一个函数更加突出，其中（除其他外）给了他们类'.currentYear'。有一个实时版here.

我需要重新添加圈子，然后使用“.currentYear”类替换其他圈子，以便它们显示在顶部。选择器更改时我更新的（相当详细的）函数是：

    d3.select("#yearSelector").on('change', yearTrans);

    function yearTrans() { 
     selected = this.value;

    rec.selectAll('.grant')
       .filter('.currentYear')
       .classed('currentYear', false)
       .on('mouseover', tip.hide)
       .transition().duration(1000)
       .attr("r", rad/2)
       .style("opacity", 0.8);

    rec.selectAll('.grant')
       .filter('.' + selected)
       .classed('currentYear', true)
       .transition().duration(1000)
       .attr("r", rad)
       .style("opacity", 1);

    rec.selectAll('.award')
       .filter('.currentYear')
       .classed('currentYear', false)
       .on('mouseover', tip.hide)
       .transition().duration(1000)
       .attr("x", function(d) { return proj([d.custom_fields.longitude - 40, d.custom_fields.latitude])[0] - (rad/2); })
       .attr("y", function(d) { return proj([d.custom_fields.longitude, d.custom_fields.latitude])[1] - (rad/2); })
       .attr("width", rad)
       .attr("height", rad)
       .style("opacity", 0.8);

    rec.selectAll('.award')
       .filter('.' + selected)
       .classed('currentYear', true)
       .transition().duration(1000)
       .attr("x", function(d) { return proj([d.custom_fields.longitude - 40, d.custom_fields.latitude])[0] - (rad); })
       .attr("y", function(d) { return proj([d.custom_fields.longitude, d.custom_fields.latitude])[1] - (rad); })
       .attr("width", rad * 2)
       .attr("height", rad * 2)
       .style("opacity", 1);


    rec.selectAll(".grant, .award")
        .sort(function(a, b) {
          if(a.memberOfClass(".currentYear") &&     !b.memberOfClass(".currentYear")) {
            return -1;
          } else if(b.memberOfClass(".currentYear")) {
            return 1;
          } else {
            return 0;
          }
        });



    rec.selectAll(".currentYear")
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide);
        };

一种方法是选择他们的parentNode并重新附加它们。我通过这种方法遇到了许多解决方案，例如this one，但它们总是处于鼠标悬停状态，我似乎无法使其在函数中运行。

另一种方法是对它们进行排序。我遇到了似乎是解决方案here的问题，但我不明白在哪个类别中包括我的课程 - 我已经尝试了我能想到的每一个组合。排序的相关代码是

    rec.selectAll(".grant, .award")
    .sort(function(a, b) {
      if(a.memberOfClass() && !b.memberOfClass()) {
        return -1;
      } else if(b.memberOfClass()) {
        return 1;
      } else {
        return 0;
      }
    });

如何应用我的.currentYear类来正确排序？

我觉得我应该能够从我发现的东西中找到答案，但我现在显然缺乏知识。提前感谢您的帮助。

Answer 1

为了将所选年份的元素置于顶部，请按照以下方式进行：

而不是您的排序代码

 rec.selectAll(".grant, .award")
    .sort(function(a, b) {
      if(a.memberOfClass() && !b.memberOfClass()) {
        return -1;
      } else if(b.memberOfClass()) {
        return 1;
      } else {
        return 0;
      }
    });

添加此代码，将元素添加到顶部。

d3.selectAll("." + selected).each(function()
{
    this.parentNode.parentNode.appendChild(this.parentNode)
});

d3从选择器按类引出元素

1 个答案: