首页 文章

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

提问于
浏览 次
2

我必须在 Map 上显示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");

圆圈出现在 Map 上 . 现在这可能是一个灵魂，但是如果尺寸适合里面的组元素（如果可能的话）或者至少是浏览器的窗口，那么它会更好 . 我还没有成功，但我已经尝试将宽度和高度属性设置为100％（如果不设置div父级也会导致不需要的视图，则无法工作） .

javascript css d3.js svg leaflet

3 回答

  • 0

    遇到了你的问题 . 在选择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);
    回复于
  • 2

    不要在 style 中写入属性，而是尝试将其写为

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

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

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

    你可以看到我的例子here但只是被警告，我没有清理这段代码 . 希望有所帮助 .

    回复于

相关问题