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

您应该将饼图布局函数与您的原始数据一起使用，以获取格式正确的数据以及 arc 函数绘制弧线所需的角度，然后将其作为数据绑定到您的弧线

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

饼图作为 MarkerClusterGroup 的标记

Pie chart as marker for MarkerClusterGroup

javascript

d3.js

leaflet

leaflet.markercluster