使用D3.js的同心弧

时间:2014-07-01 10:15:40

标签: svg d3.js

我有一个数据集

var data = [100,150,200,250]

我想使用D3从我的数据集中绘制半径作为元素的同心圆弧。请帮忙。

到目前为止,我的代码如下: -

var width = 500;
var height = 500;

var p = Math.PI *2 ;

var data = [100,150,200,250];

var canvas = d3.select("body").append("svg")
        .attr("width",width)
        .attr("height",height);

var group = canvas.append("g")
        .attr("transform","translate(100,200)");


var arc = d3.svg.arc()
        .innerRadius(function(d){return (d-1)})
        .outerRadius(function(d){return d})
        .startAngle(0)
        .endAngle(p/2);

var arcs = group.selectALl(".arc")
        .data(data)
        .enter()
        .append("g")
        .attr("class","arc");

    arcs.append("path")
        .attr("d",arc);

我收到错误“Uncaught TypeError:undefined不是函数”。请帮忙

1 个答案:

答案 0 :(得分:1)

我发现您的代码中存在拼写错误。

请将selectALl(“。arc”)更改为var arcs = group.selectALl(“。arc”)中的selectAll(“。arc”) 并且您的代码将有效。