javascript - 发光的球体-D3正交投影无法使CSS工作

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

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

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

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

我之前有一个世界巡回示例，它使用了画布，并且能够给它阴影以创建我真正喜欢的发光效果。

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

这是我的代码（.globe类的fill属性似乎正在工作）：

<!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>

如果有人可以帮助您，那将是个好消息，或者如果答案已经存在，请给我指出正确的方向

谢谢！

最佳答案

如果您包括想要的效果的图片，那将会有所帮助。

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

前两个具有相应的样式：

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

但是，阴影are a bit trickier。

关于javascript - 发光的球体-D3正交投影无法使CSS工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27569194/