Question

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

Answer 1

您可以根据不同的情况选择append种不同的形状：

// 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)

Answer 2

为了实现目标，首先必须了解CSS概念。首先，您可以在3个地方为CSS标记添加HTML/SVG。

外部CSS文件，带有HTML块的<style>文件相同标签内的内联CSS例如。 <circle> <li> <line>等。

在您的情况下，如果您想为不同的节点提供不同的样式，那么您可以为它们提供特定的css class/id选择器，并在我之前提到的3种方法中的任何一种中使用样式。

让我们说你想让某些圈子透明，然后给圈子一个班级＆＃34; trCircles＆＃34;并在外部CSS文件中指定CSS并将文件与<link>

链接

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

你可以在CSS文件中找到

。

.trCircle{
 fill : transparent;
}

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

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

希望你能得到这个想法。

有向图 - 节点级CSS样式

2 个答案: