在有向图中循环遍历 SVG 圆圈

Question

我一直在研究我在网上找到的一些代码，用于在 D3 中创建和使用有向图（http://bl.ocks.org/cjrd/6863459). I asked a question about this yesterday - Directed graph - node level CSS styles，这让我大致了解了如何向 SVG 对象添加 CSS 样式.但是，我仍然无法做我想做的事。这是因为，在JS文件中，他们似乎使用"nodes"创建"circles"，然后一次渲染它们而不是循环通过它们。在 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 class 的行，

newGs.classed(consts.circleGClass, true)

似乎将 class 应用于一行中的所有 "circles"。相反，我想遍历每个节点并针对该节点的圆圈，根据节点的属性应用 CSS 样式（为简单起见，假设 "title" 以某些文本，我想让它成为一个蓝色圆圈）。我仍然不知道该怎么做。有人可以帮忙吗？同样，我上一个问题的答案对理解 CSS 有很大帮助，但另一个问题仍然阻碍我做我想做的事。

Answer 1

为更清楚起见添加评论。

// 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)

这一行的意思是将class添加到所有创建的gDOM元素或组中。在 code 你指的是 circleGClass: "conceptG" 阅读本文了解如何添加 CSS to DOM in D3

在 code 中，您要像这样向组中添加圆圈

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 classes 而不是 "red"，"blue" 这将是我需要的一切。

要添加 class 你可以这样做。

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

希望对您有所帮助！

在有向图中循环遍历 SVG 圆圈

Loop through SVG circles in directed graph

javascript

css

svg

visualization

d3.js