Concentric arcs using D3.js

Question

I have a data set

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

I want to draw concentric arcs having radius as elements from my dataset using D3. Please help.

Below is my code so far :-

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

I get an error "Uncaught TypeError: undefined is not a function ". Please help

Answer 1

I see there is a typo in your code.

Please change selectALl(".arc") to selectAll(".arc") in var arcs = group.selectALl(".arc") and your code will work.