关于 javascript:D3 Leaflet Circle SVG 元素不显示任何颜色


D3+Leaflet Circle SVG element not displaying any color

我必须在带有 d3 的地图上显示一些 svg 圆形元素。

这是其中一个指向罗马的代码，其中一些样式属性设置为 D3。

1
2
3
4
var feature = g.append("circle")
    .style("stroke","#006600")
    .style("fill","#00cc00")
    .attr("r", 20);

如下图所示，元素块没有正确显示右侧面板上指定的颜色。

http://i.stack.imgur.com/YwGLD.png

编辑：
好的，整个问题实际上是在 CSS 规则上。
事实上，像这样设置 svg 元素的宽度和高度属性：

1
2
var svg = d3.select(map.getPanes().overlayPane).append("svg").style("width","10000").style("height","10000"),
  g = svg.append("g").attr("class","leaflet-zoom-hide");

圆圈出现在地图上。
现在这可能是一个灵魂，但如果尺寸适合内部的组元素(如果可能的话)或至少适合浏览器的窗口会更好。
我还没有成功，但我尝试将宽度和高度属性设置为 100%(如果不设置 div 父级，将无法工作，从而导致不需要的视图)。

相关讨论

有你的问题。在选择 svg 之前使用 map._initPathRoot();

你必须像下面这样使用

1
2
3
4
5
6
map._initPathRoot();
var svg = d3.select("#map-container").select("svg").append("g");
var feature = svg.append("circle")
.style("stroke","#006600")
.style("fill","#00cc00")
.attr("r", 20);
相关讨论

由于您已经在使用 Leaflet，您可能只想使用 Leaflet 的圈子制作器添加圈子，然后添加适当的属性/类。然后，您可以根据需要在 W/D3 中选择课程。

1
2
3
4
5
6
7
L.circleMarker([+latitude,+longitude],{
                        color: 'steelblue',
                        fillColor: 'steelblue',
                        fillOpacity: 0.2,
                        radius:10,
                        className:"tweet_location_pre_data"
                    }).addTo(map)

您可以在此处查看我的示例，但请注意，我没有清理此代码。希望有帮助。

相关讨论

不要在 style 中写属性，而是尝试将其写为

1
<circle cx="100" cy="100" r="60" stroke="rgb(0, 102, 0)" stroke-width="3" fill="rgb(0, 204, 0) />