Javascript 从attr生成d3弧_Javascript_D3.js

Javascript 从attr生成d3弧

javascript d3.js

Javascript 从attr生成d3弧,javascript,d3.js,Javascript,D3.js,我是D3新手，一直在尝试在函数中生成arc。但如果我从attr命令调用该函数，则在路径生成过程中会出现以下错误：错误：属性d:应为moveto路径命令（'M'或'M'）， “函数弧（）{…” 遵循代码和数据： <!DOCTYPE html> <meta charset="utf-8"> <style> .arc text { font: 20px sans-serif; text-anchor: middle; } .arc path {

我是D3新手，一直在尝试在函数中生成arc。但如果我从attr命令调用该函数，则在路径生成过程中会出现以下错误：

错误：属性d:应为moveto路径命令（'M'或'M'）， “函数弧（）{…”

遵循代码和数据：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
    font: 20px sans-serif;
    text-anchor: middle;
}

.arc path {
    stroke: #fff;
}
</style>
<svg id="vis" width="600" height="600"></svg>
<script src="d3.v4.js"></script>
<script>

var svg = d3.select("#vis"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var classes = ["c1","c2","c3","c4","c5"];

var pie = d3.pie()
    .sort(null)
    .value(classes.length)
    ;

function getPaths(p, v) {
    var rt = p + v;
    var rm = (radius*v)/rt;
    var ipath = d3.arc().innerRadius(0).outerRadius(parseInt(rm));
    var epath = d3.arc().innerRadius(parseInt(rm)).outerRadius(parseInt(radius));
    return [ipath,epath];
}

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40)
    ;
d3.csv("fakedatateste.csv", function(data) {
        var arc = g.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc")
            ;

                var paths = getPaths(60, 40);

        arc.append("path")
            .attr("d", function(d){return getPaths(d.data.people, d.data.vehicles)[0];})
            .attr("fill", function(d) { return color(d.data.region); })
            ;

        arc.append("path")
            .attr("d", paths[1])
            .attr("fill", function(d) { return color(d.data.region); })
                        ;

                arc.append("text")
            .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
            .attr("dy", "0.35em")
            .text(function(d) { return d.data.region; })
            ;
        }
);

</script>

有人能给我指出正确的方向吗？根据我的数据生成圆弧的正确位置在哪里

例：

arc.append（“path”）.attr（“d”，函数（d）{返回getpath（d.data.people，d.data.vehicles）[0]；}）

给我一个错误

region,people,vehicles
c1,58,2
c2,59,1
c3,48,12
c4,30,30
c5,50,10