关于 javascript:D3 Leaflet Circle SVG 元素不显示任何颜色
D3+Leaflet Circle SVG element not displaying any color
我必须在带有 d3 的地图上显示一些 svg 圆形元素。
这是其中一个指向罗马的代码，其中一些样式属性设置为 D3。
|
var feature = g.append("circle")
.style("stroke","#006600") .style("fill","#00cc00") .attr("r", 20); |
如下图所示，元素块没有正确显示右侧面板上指定的颜色。
http://i.stack.imgur.com/YwGLD.png
编辑：
好的，整个问题实际上是在 CSS 规则上。
事实上，像这样设置 svg 元素的宽度和高度属性：
|
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 父级，将无法工作，从而导致不需要的视图)。
相关讨论
- 好像在地图后面。尝试重新排序元素。
- 你能添加jsfiddle吗？您没有传递 cx 和 cy 属性。您是否使用其他代码来设置 cs 和 cy 属性？
- 看我的回答。我希望你已经完成了使用我的代码。
- 我正在使用 trasform 属性来翻译它们，cx 和 cy 几乎相同(我也尝试了 ths 选项)。问题在于 svg 容器的 css 属性。处理它并找到正确的解决方案有点棘手。
有你的问题。在选择 svg 之前使用
你必须像下面这样使用
|
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); |
相关讨论
- 我不知道为什么我第一次(以及之后的很多次)尝试了这个解决方案，但根本没有用。但是现在，也许是为了荒凉xD，我已经重试了更多时间并且它起作用了。谢谢
由于您已经在使用 Leaflet，您可能只想使用 Leaflet 的圈子制作器添加圈子，然后添加适当的属性/类。然后，您可以根据需要在 W/D3 中选择课程。
|
L.circleMarker([+latitude,+longitude],{
color: 'steelblue', fillColor: 'steelblue', fillOpacity: 0.2, radius:10, className:"tweet_location_pre_data" }).addTo(map) |
您可以在此处查看我的示例，但请注意，我没有清理此代码。希望有帮助。
相关讨论
- 感谢您分享此解决方案，但我正在尝试使用特定的数据集记录属性(例如，在 Json 文件中具有某些值的圆圈的颜色和半径)来控制 svg 元素属性。
- 不确定我得到你@claudius_dev。在我发布的链接中，我正在遍历推文，并且仅在数据包含属性"tweets_geo_with_media"时添加圈子。同样，您当然可以控制颜色、填充、半径等。属性基于您的数据值。如果这没有意义，很乐意提供帮助。
不要在
|
<circle cx="100" cy="100" r="60" stroke="rgb(0, 102, 0)" stroke-width="3" fill="rgb(0, 204, 0) />
|
THE END
二维码