javascript D3.js 中的透明颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17529522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:40:41  来源:igfitidea点击:

transparent color in javascript D3.js

javascriptd3.js

提问by star

EDIT: I have a SVG graph produced with d3.js. The filled area of the graph is coloured by CSS rules. I would like the areas to be semi-transparent so that you can see data obscured by the foremost graph area.

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

Original:

原来的:

Is there anyway to make the color of this graph transparent? http://jsfiddle.net/skys331/QBDGB/22/I want to be able to see behind the green data.

有没有办法使这个图形的颜色透明?http://jsfiddle.net/skys331/QBDGB/22/我希望能看到后面的绿色数据。

Thanks

谢谢

回答by rossipedia

Yes. You can use transparentfor the fill, like so:

是的。您可以transparent用于填充,如下所示:

.line1 {
  fill: transparent;
  ...
}

You can alternatively set the opacity of the .line1element:

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

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

Or set the fill to us rgba(RGB color with an alpha component):

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

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

回答by Rene Pot

Add Opacity to the green:

为绿色添加不透明度:

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

}

Edited your fiddle: http://jsfiddle.net/QBDGB/23/

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