CODEWITHSUNDEEP
svgd3.js
user3793422
user3793422

Reputation: 23

Concentric arcs using D3.js

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

Upvotes: 2

Views: 703

Answers (1)

Shiv Chetry
Shiv Chetry

Reputation: 38

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.

Upvotes: 1

Related Questions