0

我正在制作一张使用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,NaNA28,28 0 ...”

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

是这样吗？提前感谢有关如何减轻错误的任何指导。

4

1 回答 1

0

您应该将饼图布局函数与原始数据一起使用，以使用 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 + ')');
于 2017-08-08T18:09:29.150 回答