餅圖作爲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 + ')');