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

希望这有帮助！

在有向图中循环通过SVG圆圈

1 个答案: