关于 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);

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

View post on imgur.com

编辑:
好的,整个问题实际上是在 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)" strokewidth="3" fill="rgb(0, 204, 0) />

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269238.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论