D3.js 将圆附加到d3中的地图上

我已经在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');    

---

将圆附加到path元素，这在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

---

首先，您的

cx

和

cy

值

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

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

projection

）：

其次，不能将圆附加到路径。使用您的

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');  

---

不管是谁否决了这一点，很可能是因为一个简单的原因：你认为你的代码附加了多少圈（一个在另一个之上）？我回答了手头的问题：）“我试图只显示一个圈，但无法显示。”你认为你的答案只附加了一个圈吗？你仍然没有显示如何只附加一个圈。您的代码在同一位置附加了几个圆（

features.length

）（OP错误地指定了该位置）。我的答案是+1，因为答案以0开头“您在向路径元素附加一个圆，这在SVG中无法完成”

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');