D3+Leaflet Circle SVG 元素不显示任何颜色答案

【问题标题】：D3+Leaflet Circle SVG element not displaying any colorD3+Leaflet Circle SVG 元素不显示任何颜色
【发布时间】：2015-10-07 15:25:18
【问题描述】：

我必须在带有 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 元素的 width 和 height 属性：

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 几乎相同（我也尝试了这个选项）。问题在于 svg 容器的 css 属性。处理它并找到正确的解决方案有点棘手。

标签： javascript css d3.js svg leaflet

【解决方案1】：

不要在style中写属性，而是尝试写成

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

【讨论】：

【解决方案2】：

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

L.circleMarker([+latitude,+longitude],{
                        color: 'steelblue',
                        fillColor: 'steelblue',
                        fillOpacity: 0.2,
                        radius:10,
                        className: "tweet_location_pre_data"
                    }).addTo(map)

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

【讨论】：

感谢分享此解决方案，但我正在尝试使用特定的数据集记录属性（例如，在 Json 文件中具有某些值的圆圈的颜色和半径）来控制 svg 元素属性。
不确定我是否明白@claudius_dev。在我发布的链接中，我正在遍历推文，并且仅在数据包含属性“tweets_geo_with_media”时添加圈子。同样，您当然可以控制颜色、填充、半径等。属性基于您的数据值。如果这没有意义，很乐意提供帮助。

【解决方案3】：

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

你必须像下面这样使用

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，我已经重试了更多时间并且它起作用了。谢谢