饼图作为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)

在最后一行中，我得到了一个错误：

错误:属性d:预期号，"MNaN，MNaN 28，28…“

我做了一些研究，我认为这可能与这样一个事实有关，那就是它考虑的是我正在证明的数据，而不是字符串。

是这种情况吗？谢谢您对如何减少错误的任何指导。

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