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

时间:2015-04-06 06:59:06

标签: javascript svg d3.js

如何在强制布局中添加和删除链接中的类。考虑我的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;
});

2 个答案:

答案 0 :(得分:4)

使用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 Class Operations

答案 1 :(得分:0)

只需你可以使用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。