在 D3 中将 css 附加到 svg

Posted 2023-03-06

技术标签:

【中文标题】在 D3 中将 css 附加到 svg【英文标题】：Append css to svg in D3 【发布时间】：2015-07-25 14:47:08 【问题描述】：

我是 d3 的新手。我正在尝试在 d3 中的 drwan 圆圈中添加一些气泡功能。我添加了 CSS 来实现气泡效果。我检查了元素 css 是否添加到圆圈中，但气泡效果没有反映。提前致谢

<style type="text/css">
.ball 
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);

.ball:before 
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: -1;


.ball .shadow 
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;


</style>

<script type="text/javascript">

circleRadii = [40]

 svgContainer = d3.select("body").append("svg");


    gcontainer=svgContainer.append("g").attr("width", 600)
                                    .attr("height", 100);

var circles = gcontainer.selectAll("circle")
                          .append("g")
                          .data(circleRadii)
                          .enter()
                          .append("circle")

var circleAttributes = circles
                       .attr("cx", 50)
                       .attr("cy", 50)
                       .attr("r", function (d)  return d; )
                       .style("fill", "green")
                       .attr("class","ball");

</script>

【问题讨论】：

在 svg 元素中没有 :before 这样的东西。 【参考方案1】：