Question

我制作了一个复合条形图，代表足球队内的足球运动员。图表在这里：http://andybarefoot.com/football/path.html

我使用了d3并构建了两个阶段的页面。首先，我加载数据并为每个玩家创建一个矩形。然后，我根据分配给每个元素的数据更新矩形的参数，具体取决于选择的视图。这意味着不同的导航选项会根据映射到元素的现有数据调整大小并重新排列矩形，但不会加载其他数据。

虽然矩形的大小调整正常但我无法根据数据重新排列矩形。

每个矩形的垂直位置仅由＆＃34; i＆＃34;乘以设定的间距变量。要改变顺序我认为我可以选择所有元素，根据相关数据排序，然后以相同的方式设置新的垂直位置。（即＆＃34; i＆＃34;的价值会发生变化）。但是，我无法让它发挥作用。

这是我的（不成功）尝试：

// select all elements and then reorder
svg
   .selectAll(".team")
   .sort(function(a, b) { 
       return b.totalClubContractDistance - a.totalClubContractDistance;
   })
;
// select all elements and reposition according to new order
svg
    .selectAll(".team")
    .duration(750)
    .attr("transform", function(d,i) {
       return "translate(0,"+teamSpacing*i+")";
    })
;

Answer 1

在d3中有4个核心概念。加入，更新，进入，退出。您可以在此处阅读更多内容：https://bost.ocks.org/mike/join/

基本上，每次要更新元素的位置时，都应该更改数据，然后进行连接，然后进行更新。

所以代码看起来像这样：

function render (data) {
    // join
    // this joins the new data to the existing data
    var teams = svg.selectAll('.team')
        .data(data);

    // update
    // this will update existing teams that have a different location
    teams.attr('transform', function (d, i) {
        return 'translate(0, ' + teamSpacing * i + ')';
    });

    // enter
    // this will add new teams that were added to the data set
    teams.enter()
        .attr('transform', function (d, i) {
            return 'translate(0, ' + teamSpacing * i + ')';
        });

    // exit
    // this will remove all the teams that are no longer part of the data set
    teams.exit()
        .remove();

}

希望这有帮助

D3 - 根据数据重新排序元素

1 个答案: