定向图 - 节点级CSS样式 [英] Directed graph - node level CSS styles

问题描述

我发现这个优秀的示例和示例代码用于绘制有向图 - http://bl.ocks.org / cjrd / 6863459
但是，graph-creator.css文件为所有节点定义了一个全局样式。如果我想为所有其他节点的某些特殊节点分配不同的样式（我希望它们是不同的形状，不同的颜色，如果可能的话还有不同的透明度）。我将如何修改此代码以添加这些节点特定的效果？

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?

推荐答案

为了实现目标，首先必须了解 CSS 概念。首先，您可以在3个位置为 HTML / SVG 标记放置 CSS

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.

外部 CSS 档案，
相同 HTML 标签中带有< style> 块的文件
Inline CSS < circle> < li> < line> 等。

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

在你的情况下，如果你想给不同的节点不同的样式， class / id 选择器，并且在我之前提到的3种方法中的任何一种中都有样式。

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.

假设您想让某些圆形透明，然后只为圆形添加一个类 trCircles ，在外部CSS文件中的CSS，并将该文件与< link>

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')
...

。

.trCircle{
 fill : transparent;
}

如果您想在d3级别应用它们。您可以在创建圈子时指定。

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')
;

希望你能得到想法。

这篇关于定向图 - 节点级CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！