发光的球体 - d3 正交投影无法让 css 工作答案

【问题标题】：glowing sphere - d3 orthographic projection cant get css to work发光的球体 - d3 正交投影无法让 css 工作
【发布时间】：2023-03-11 03:24:02
【问题描述】：

我正在尝试结合这两个 d3 示例：

http://bl.ocks.org/mbostock/4183330

http://bl.ocks.org/mbostock/2206590

我有一个投影显示正确的球体，并且缩放工作正常。我现在要做的就是设计它。

我之前得到了世界巡演示例，它使用画布，我能够给它一个阴影来创建我非常喜欢的发光效果。

合并这两个代码片段后，我现在使用 svg 元素，但我似乎无法让发光效果发挥作用。

这是我的代码（.globe 类的填充属性似乎可以工作）：

<!DOCTYPE html>
<meta charset="utf-8">
 <style>

body {
  background: #000000;
}

.background {
  fill: none;
  pointer-events: all;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.feature.active {
  fill: #00FF15;
}

.globe
{
  fill:#fff;
  strokeStyle: #35C441; 
  lineWidth: 5; 
  shadowColor: #35C441;
  shadowBlur: 40;
  shadowOffsetX: 0;
  shadowOffsetY: 0;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script src="d3/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 720;
    active = d3.select(null);

var globe = {type: "Sphere"};

var projection = d3.geo.orthographic()
    .scale(height / 2.1)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.5);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//append a rectange to the svg element. give it the background css style class.
//on click do reset?
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

//append "g" to the svg element
var g = svg.append("g")
    .style("stroke-width", "1.5px");

var path = d3.geo.path()
    .projection(projection)

d3.json("./world-110m.json", function(error, world) {
  g.append("path")
        .datum(globe)
        .attr("class", "globe")
        .attr("d", path);

  g.selectAll("path")
    .data(topojson.feature(world, world.objects.countries).features)
    .enter().append("path")
    .attr("d", path)
    .attr("class", "feature")
    .on("click", clicked);



 g.append("path")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);

});

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
}

</script>

</body>
</html>

如果有人可以提供帮助，那就太好了，或者如果这里已经存在答案，请您指出正确的方向

谢谢！

【问题讨论】：

标签： javascript css svg d3.js

【解决方案1】：

如果你附上你想要的效果的图片会有所帮助。

也就是说，您的 CSS 根本不适用于 SVG 元素：

前两个有对应的样式：

.globe {
   fill:#fff;
   stroke: #35C441; 
   stroke-width: 5; 
}

不过，有阴影，are a bit trickier。

【讨论】：