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

Question

我一直在研究我在网上找到的一些代码，用于在 D3 ( http://bl.ocks.org/cjrd/6863459) 中创建和使用有向图。我昨天问了一个关于这个的问题 - Directed graph - node level CSS styles这让我大致了解了如何将 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 有很大帮助，但这个其他问题仍然阻碍我做我想做的事。

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)

这一行的意思是给所有创建的 g DOM 元素或组添加类。 在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 类而不是“红色”、“蓝色”，那将是我所需要的一切。

要添加类，您可以这样做。

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

希望这对您有所帮助!