Question

我是D3的新手并写了一个程序来画一个馅饼圈。

"http://www.w3.org/TR/html4/loose.dtd">
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pie ring</title>  
</head> 

<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script type="text/javascript">
        var dataset=[{name:A,value:5},{name:C,value:10},{name:F,value:13}];
        var pie=d3.layout.pie(dataset);

        var h=600;
        var w=600;

        var outerRadius=w/2;

        var innerRadius=w/3;

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

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

        var color=d3.scale.category10();

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

        .attr("transform","translate("+outerRadius+","+outerRadius+")");//translate(a,b)


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


        arcs.append("text")
        .attr("transform",function(d){ 
            return "translate("+arc.centroid(d)+")";
        })
        .attr("text-anchor","middle")
        .text(function(d){
            return d.name + ":" + d.value;
        });
        </script>

    </body>
</html>

但是失败了，我不知道如何定义数据结构并且不知道如何设置数据集。 pie（dataset）或pie（function（d）{return d.value}）;你能帮我纠正吗

javascript控制台告诉我A未定义。此A是数据集名称的值。我不知道唯一的请求是数字值还是数字数组用于饼圈。

Answer 1

这里几乎没有问题。它告诉你A没有被定义，因为它不是。您使用纯文本而不是字符串，因此它认为A是变量，而不是标签。即使您解决了这个问题，结构也会出现一些其他问题。

几乎直接从d3饼图示例here复制，我输入了你的数据并且它很有魅力。

enter image description here

这是代码，但我也强烈建议您阅读本教程，以便了解它应该如何工作。

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pie ring</title>  
</head> 

<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script type="text/javascript">

    var w = 600;                        
    var h = 600;    

    var outerRadius=w/2;
    var innerRadius=w/3;


    color = d3.scale.category20c();    

    data = [{"label":"A", "value":5}, 
            {"label":"C", "value":10}, 
            {"label":"F", "value":13}];

    var vis = d3.select("body")
        .append("svg:svg")           
        .data([data])                 
            .attr("width", w)          
            .attr("height", h)
        .append("svg:g")               
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")  

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

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

    var arcs = vis.selectAll("g.slice")    
        .data(pie)                         
        .enter()                           
            .append("svg:g")              
                .attr("class", "slice");  

        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } ) 
                .attr("d", arc);                                   

        arcs.append("svg:text")                                  
                .attr("transform", function(d) {                 
                d.innerRadius = innerRadius;
                d.outerRadius = outerRadius;
                return "translate(" + arc.centroid(d) + ")";       
            })
            .attr("text-anchor", "middle")                        
            .text(function(d, i) { return data[i].label; });  

        </script>

    </body>
</html>

如何定义D3的数据结构来绘制饼圈

1 个答案: