Directed graph - node level CSS styles

问题

I found this excellent example and sample code for drawing directed graphs - http://bl.ocks.org/cjrd/6863459 However, the graph-creator.css file defines a global style for all nodes. What if I want to assign different styles to certain "special" nodes from all other nodes (I want them to be different shapes and also differently colored and if possible also a different transparency). How would I modify this code to add these node specific effects?

回答1:

You can choose to append different shapes here based on different scenario:

// append new elements in <g> element in scenario X
// you can pass different parameters for specific styling here
// for example, user select "red" color rect in setting filters

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

// alternatively append rect
newGs.append("rect")
  .attr({
    "x": // mouse event info as circles in the demo
    "y": // mouse event info as circles in the demo
    "width": String(consts.rectWidth),
    "height": String(consts.rectHeight)
  })
  .attr("class", "myRectStyle") // set styles in css 
  .attr("fill", "red")
  .attr("rx",5)
  .attr("ry",5)

回答2:

In order to achieve the goal, first you must understand the CSS concepts. First of all you can place a CSS for a HTML/SVG markup in 3 places.

External CSS file, Same HTML File with a <style> block Inline CSS inside the tag eg. <circle> <li> <line> etc.

In your case, if you want to give different styles for different nodes, then you can give them specific css class/id selectors and have styles in any of the 3 methods I have mentioned previously.

Let's say you want to make certain circles transparent, then just give the circles a class "trCircles" and specify the CSS in a external CSS file and link the file with <link>

 d3.select('g')
     .append('circle')
     .attr('class', 'trCircle')
...

in the CSS file you can have.

.trCircle{
 fill : transparent;
}

Orr if you want to apply them in the d3 level. You can specify it when you create the circle.

d3.select('g')
 .append('circle')
 .attr('cx' , '100')
.....
 .style('fill','transparent')
;

Hope you get the idea.

来源：https://stackoverflow.com/questions/34103787/directed-graph-node-level-css-styles