使用D3.js的同心弧

Question

我有一个数据集

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不是函数”。请帮忙

Answer 1

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

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