Question

我正在尝试从外部数据生成d3中的饼图，我在下面的代码中找不到错误，因为它没有抛出任何错误。

这是我的代码

    //file path is correct  
    d3.json("errortable12.json", function(data){

    //var obj = JSON.parse(data);
    var r= 300; 
    var color =d3.scale.ordinal()
                .range(["red","blue","orange"])
    console.log(data);

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

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

    var arc = d3.svg.arc()
                .innerRadius(200)
                .outerRadius(r);

    var pie = d3.layout.pie()
                .value(function(d) { return d.age});

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

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

    arcs.append("path")
        .attr("d.age",arc)
        .attr("fill",function(d){return color(d.data);});

Answer 1

两个问题。首先，＆＃34; d.age＆＃34;不是SVG属性，只需使用＆＃34; d＆＃34;。此外，无需追加两个路径，只需调用一次。其次，将d.data传递给颜色无效，只需使用i。

arcs.append("path")
    .attr("d.age",arc); //<-- d.age is not a valid SVG attribute

arcs.append("path")
    .attr("d.age",arc) //<-- why repeat this twice?
    .attr("fill",function(d){return color(d.data);});

应该是：

     arcs.append("path")
       .attr("d", arc)
       .attr("fill", function(d,i) {
          // return color(d.data);
          return color(i); //<-- just use i
     });

完整代码here。

在D3中生成饼图时面临问题

1 个答案: