將圓圈追加到d3中的地圖

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

來源

2017-10-12 LSR

-1

您正在追加一個圓到一個路徑元素，這是無法在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

來源

2017-10-12 19:38:22

糾正錯誤，在我的示例代碼 –

誰downvoted這可能做的理由很簡單：有多少圈，你認爲你的代碼附加（右一個比其他）？ –

我回答了手頭的問題:)「我試圖讓一個圓圈顯示，但不能。」 –

首先，你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');

來源

2017-10-12 23:26:30

將圓圈追加到d3中的地圖

回答

相關問題