在链接d3强制布局中添加和删除类

Add and remove the class in the link d3 force layout

本文关键字：添加 删除 布局 链接 d3      更新时间：2023-09-26

如何在强制布局的链接中添加和删除类。考虑一下如果我的d.source.x == d.target.x，那么我必须添加类，否则我必须从链接中删除该类。

path.attr("d", function(d) {
    var x1 = d.source.x,
        y1 = d.source.y,
        x2 = d.target.x,
        y2 = d.target.y,
        dx = Math.abs(x2 - x1),
        dy = Math.abs(y2 - y1),
        dr = dx * dx + dy * dy;
    var rotation = 0;
    if (x1 === x2) {
        var dr = Math.sqrt(dx * dx + dy * dy) / 1.8; // note that this is always equal to Math.abs(dy)
        var sweep = 1;
        if (y1 > y2) {
            sweep = 0;
        }
        return "M" +
            d.source.x + "," + d.source.y +
            "A" + dr + "," + dr +
            " 0, 0" + sweep + " " +
            d.target.x + "," + d.target.y;
    }

    return "M" +
        d.source.x + "," +
        d.source.y + "A" +
        dr + "," + dr + " 0 0,1 " +
        d.target.x + "," +
        d.target.y;
});

使用d3类运算符。

if(d.source.x == d.target.x){
   d3.select(this).classed("your-class-name",true); //Adding class
} else{
   d3.select(this).classed("your-class-name",false); //Removing class
}

或者简称d3.select(this).classed("your-class-name",d.source.x == d.target.x);

有关更多详细信息，请参阅jaketrent.com 上的D3类操作

您可以简单地使用jquery选择器来实现这一点——

假设你的链接包含.link类，并且你想添加或删除任何其他类，例如"你的类"，那么你可以简单地写，

if(d.source.x == d.target.x){
   $(".link").addClass("your-class"); //Adding class
} else{
  $(".link").removeClass("your-class");  //Removing class
}

D3只是一个简单的Javascript库，所以它完全支持jquery。

相关文章：