円にd3で円を追加する

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

パス要素に円を追加していますが、これは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'); 

あなたは、複数の円を追加している場合...例えば、すべての

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

Answer 2

まず、あなたのcxとcy値、CX、CYを割り当てる部品を変更する必要があります、そしてrは追加されたデータを使用するように

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