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：预期数字，＆＃34; MNaN，NaNA28,28 0 ...＆＃34;

我做了一些研究，我认为这可能与它认为我证明数字而不是字符串的数据有关。

是这样的吗？提前感谢您提供有关如何缓解错误的任何指导。

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

饼图作为MarkerClusterGroup的标记

1 个答案: