在有向图中循环SVG圆

Loop through SVG circles in directed graph

本文关键字：SVG 循环 有向图      更新时间：2023-09-26

我一直在浏览我在网上找到的一些代码，这些代码用于在D3中创建和玩有向图(http://bl.ocks.org/cjrd/6863459)。昨天我问了一个关于这个问题——有向图节点级CSS样式，这让我对如何将CSS样式添加到SVG对象有了一个大致的想法。然而，我仍然不能做我想做的事。这是因为，在JS文件中，它们似乎使用"节点"来创建"圆"，然后一次性渲染它们，而不是在它们之间循环。在updateGraph函数中，我们有行-

// add new nodes
var newGs= thisGraph.circles.enter()
      .append("g");
newGs.classed(consts.circleGClass, true)
  .attr("transform", function(d){return "translate(" + d.x + "," + d.y + ")";})
  .on("mouseover", function(d){
    if (state.shiftNodeDrag){
      d3.select(this).classed(consts.connectClass, true);
    }
  })
  .on("mouseout", function(d){
    d3.select(this).classed(consts.connectClass, false);
  })
  .on("mousedown", function(d){
    thisGraph.circleMouseDown.call(thisGraph, d3.select(this), d);
  })
  .on("mouseup", function(d){
    thisGraph.circleMouseUp.call(thisGraph, d3.select(this), d);
  })
  .call(thisGraph.drag);

首先，我不确定.append（"g"）在这里是什么意思。但更重要的是，应用CSS类的行

newGs.classed(consts.circleGClass, true)

似乎将类应用于一行中的所有"圆"。相反，我想遍历每个节点，对于该节点的圆圈，应用基于节点属性的CSS样式（为了简单起见，假设"标题"以某个文本开头，我想使其成为蓝色圆圈）。我仍然不知道该怎么做。有人能帮忙吗？同样，我之前的问题的答案对理解CSS有很大帮助，但这个问题仍然阻碍了我做我想做的事情。

添加注释以提高清晰度。

// here thisGraph.circles is data selection
//so if the data array has 10 elements in array it will generate 10 g or groups.
var newGs= thisGraph.circles.enter()
      .append("g");
//here we are adding classes to the g
newGs.classed(consts.circleGClass, true)
  .attr("transform", function(d){return "translate(" + d.x + "," + d.y + ")";})
  //attaching mouse event to the group
  .on("mouseover", function(d){
    if (state.shiftNodeDrag){
      d3.select(this).classed(consts.connectClass, true);
    }
  })
  .on("mouseout", function(d){
    d3.select(this).classed(consts.connectClass, false);
  })
  .on("mousedown", function(d){
    thisGraph.circleMouseDown.call(thisGraph, d3.select(this), d);
  })
  .on("mouseup", function(d){
    thisGraph.circleMouseUp.call(thisGraph, d3.select(this), d);
  })
  .call(thisGraph.drag);//attaching drag behavior to the group

这条线是什么意思？

newGs.classed(consts.circleGClass, true)

这一行的意思是将类添加到所有创建的gDOM元素或组中。在您所指的代码中，它的意思是circleGClass: "conceptG"阅读如何在D3 中将CSS添加到DOM

在代码中，你将圆圈附加到像这样的组中

newGs.append("circle")
      .attr("r", String(consts.nodeRadius));

现在每组都有一个圆圈。

下一个问题

我想遍历每个节点，对于该节点的圆，应用基于节点属性的CSS样式

您可以遍历所有圆，并根据与节点相关的数据添加样式，如下所示。

newGs.append("circle")
      .attr("r", String(consts.nodeRadius))
      .style("fill", function(d){
        if(d)//some condition on data
        {
          return "red";
        } 
        else 
        return "blue";
      });

问题：如果你能告诉我如何添加CSS类，而不是"红色"、"蓝色"，这将是我所需要的一切

要添加类，可以这样做。

newGs.append("circle")
          .attr("r", String(consts.nodeRadius))
          .attr("class", function(d){
            function(d){
            if(d)//some condition on data
            {
              return "red";//this will put class red in the node.
            } 
            else 
            return "blue";//this will put class blue in the node.
          });

另一种方法：

  newGs.append("circle")
    .attr("r", String(consts.nodeRadius))
    .classed({
    'red': function(d) { return d.condition1 == "something"; },
    'blue': function(d) { return d.condition1 != "something"; }
  });

希望这能有所帮助！

相关文章：