MarkerClusterGroupのマーカーとしての円グラフ

Question

markerclustergroupを使用するチラシマップで作業しています。しかし私はマーカーをD3を使って円グラフにして、データを提供したいと思っています。ここで

は、私がこれまでにやったことです：

私はこのエラーを取得しています。この最後の行で

function getMarkers(){ 
       var dataset = [ 
       {legend:"apple", value:10, color:"red"}, 
       {legend:"orange", value:45, color:"orangered"}, 
       {legend:"banana", value:25, color:"yellow"}, 
       {legend:"peach", value:70, color:"pink"}, 
       {legend:"grape", value:20, color:"purple"} 
       ]; 

       var width = 960; 
       var height = 500; 
       var radius = 200; 
       var r = 28; 
       var strokeWidth = 1; 
       var origo = (r+strokeWidth); //Center coordinate 
       var w = origo*2; //width and height of the svg element 
       var arc = d3.svg.arc().innerRadius(r-10).outerRadius(r); 

       var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); 

       var vis = d3.select(svg) 
       .data(dataset) 
       .attr('class', 'marker-cluster-pie') 
       .attr('width', width) 
       .attr('height', height); 

       var arcs = vis.selectAll('g.arc') 
       .data([100,10,50,60,75]) 
       .enter().append('g') 
       .attr('class', 'arc') 
       .attr('transform', 'translate(' + origo + ',' + origo + ')'); 

       arcs.append('path') 
       .attr('class', 'grzeger') 
       .attr('stroke-width', strokeWidth) 
       .attr('d', arc) 

：

Error: attribute d: Expected number, "MNaN,NaNA28,28 0 …"

私はそれが事実に関連するかもしれないと思ういくつかの研究をしましたそれは私が文字列の代わりに数値として証明しているデータを考慮するということです。

これが該当しますか？エラーを緩和する方法のガイダンスについては、事前に感謝します。

Answer 1

あなたは弧を描くように、アーク機能のために必要な角度で適切にフォーマットされたデータを得るためにあなたの生データとパイのレイアウト機能を使用して、結合しなければならないこと、あなたの弧

var pie = d3.layout.pie() 
      .sort(null) 
      .value(function(d){ return d }); 

var arcs = vis.selectAll('g.arc') 
      .data(pie([100,10,50,60,75])) 
      .enter().append('g') 
      .attr('class', 'arc') 
      .attr('transform', 'translate(' + origo + ',' + origo + ')');