Question

我在d3中创建了一张地图，需要在其中附加一系列圆圈。我试图只显示一个圆圈而不能。我也改变了圆圈的大小。开发工具在页面上显示一个圆圈但不会显示。这是我的代码：

圆圈位于地图的中心。

var features = parsedJSON.features;

mapLayer.selectAll('path')
    .data(features)
    .enter().append('path')
    .attr('d', path)
    .attr('vector-effect', 'non-scaling-stroke')
    .attr('fill', '#e8edfc')
    .select('svg').enter()
    .append('circle')
    .attr('cx',-106.661513 )
    .attr('cy', 35.05917399 )
    .attr('r','10px')
    .style('fill', 'red');

Answer 1

首先，您的cx和cy值......

.attr('cx',-106.661513 )
.attr('cy', 35.05917399 )

...似乎不是实际的SVG坐标，而是经度和纬度。在这种情况下，你必须使用你的投影（这里我假设它被命名为projection）：

.attr('cx', projection([-106.661513, 35.05917399])[0])
.attr('cy', projection([-106.661513, 35.05917399])[1])

其次，您不能在路径上添加圆圈。使用mapLayer选项：

mapLayer.append("circle")   
    .attr('cx', projection([-106.661513, 35.05917399])[0])
    .attr('cy', projection([-106.661513, 35.05917399])[1])
    .attr('r','10px')
    .style('fill', 'red');

Answer 2

您正在向路径元素添加一个圆圈，这在SVG中无法完成。更好的做法是为每个功能创建一个组元素（“g”），并为其添加路径，圆圈等，例如上面的代码应为：

    let feature = mapLayer.selectAll('.path')
        .data(features)
        .enter()
        .append('g')

     feature.append('path)
        .attr('d', path)
        .attr('vector-effect', 'non-scaling-stroke')
        .attr('fill', '#e8edfc')

    feature.append('circle')
        .attr('cx',-106.661513 )
        .attr('cy', 35.05917399 )
        .attr('r','10px')
        .style('fill', 'red');

如果要添加多个圆，则需要更改分配cx，cy和r的部分以使用附加数据，例如

feature.append('circle')
            .attr('cx', function(d) { return xScale(d.value); })
            etc

在d3中附加圆圈以进行映射

2 个答案: