Question

我必须在地图上显示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父级也会导致不需要的视图，则无法工作）。

Answer 1

得到了你的问题。在选择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);

Answer 2

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

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

Answer 3

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

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

您可以看到我的示例here，但只是被警告，我没有清理此代码。希望有所帮助。

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

3 个答案: