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); |
如下图所示，元素块没有正确显示右侧面板上指定的颜色。
编辑：
好的，整个问题实际上是在 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 之前使用
你必须像下面这样使用
|
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) |
您可以在此处查看我的示例，但请注意，我没有清理此代码。希望有帮助。
不要在
|
1
|
<circle cx="100" cy="100" r="60" stroke="rgb(0, 102, 0)" stroke–width="3" fill="rgb(0, 204, 0) />
|
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269238.html