javascript D3.js中的透明色

时间:2013-07-08 14:43:09

标签: javascript d3.js

编辑:我有一个用d3.js生成的SVG图。图表的填充区域由CSS规则着色。我希望这些区域是半透明的,这样您就可以看到最前面的图形区域遮挡的数据。

原件:

有没有让这个图的颜色透明? http://jsfiddle.net/skys331/QBDGB/22/ 我希望能够看到绿色数据背后。

由于

2 个答案:

答案 0 :(得分:23)

是。您可以使用transparent进行填充,如下所示:

.line1 {
  fill: transparent;
  ...
}

您也可以设置.line1元素的不透明度:

.line1 {
    fill: green;
    opacity: 0.5;
}

或者将填充设置为我们rgba(带有alpha分量的RGB颜色):

.line1 {
    fill: rgba(0, 128, 0, 0.5);
}

答案 1 :(得分:4)

将不透明度添加到绿色:

.line1 {
  fill: green;
  stroke: black;
  stroke-width: 1.5px;
  opacity:0.5;

}

编辑你的小提琴:http://jsfiddle.net/QBDGB/23/