在 link d3 force 布局中添加和删除 class

Question

如何在强制布局的 link 中添加和删除 class。考虑如果我的 d.source.x == d.target.x 那么我必须添加 class 否则我必须从 link.

中删除 class

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;
});

Answer 1

使用 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);

有关详细信息，请参阅 D3 Class Operations jaketrent.com

Answer 2

您只需使用 jquery 选择器即可--

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

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

D3 只是 Javascript 库，因此完全支持 jquery。

在 link d3 force 布局中添加和删除 class

Add and remove the class in the link d3 force layout

javascript

svg

d3.js