Прокрутка кругов 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 («г») означает, что здесь. Но более важно то, что линия, где применяется класс 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) 

Эта строка означает добавление класса во все созданный элемент или группу 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"; } 
    }); 

Надеется, что это помогает!