Question

我正在尝试将这两个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>

如果有人可以提供帮助那就太棒了，或者如果答案已经存在，请指点我正确的方向

谢谢！

Answer 1

如果你包含了你想要的效果图片，那会有所帮助。

也就是说，你的CSS对SVG元素无效：

enter image description here

前两个有相应的风格：

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

阴影，are a bit trickier。

发光球 - d3正投影不能让CSS工作

1 个答案: