D3.js 如何定义D3的数据结构来绘制饼图环_D3.js_Data Structures_Data Visualization

D3.js 如何定义D3的数据结构来绘制饼图环

d3.js data-structures

D3.js 如何定义D3的数据结构来绘制饼图环,d3.js,data-structures,data-visualization,D3.js,Data Structures,Data Visualization,我是一个D3新手，写了一个程序来画一个饼环 ”http://www.w3.org/TR/html4/loose.dtd"> 馅饼圈 VarDataSet=[{name:A，value:5}，{name:C，value:10}，{name:F，value:13}]； var pie=d3.layout.pie（数据集）； var h=600； var w=600；外部无功功率=w/2； var innerRadius=w/3； var arc=d3.svg.arc（） .outerRadius

我是一个D3新手，写了一个程序来画一个饼环

”http://www.w3.org/TR/html4/loose.dtd">
馅饼圈
VarDataSet=[{name:A，value:5}，{name:C，value:10}，{name:F，value:13}]；
var pie=d3.layout.pie（数据集）；
var h=600；
var w=600；
外部无功功率=w/2；
var innerRadius=w/3；
var arc=d3.svg.arc（）
.outerRadius（outerRadius）
.内半径（内半径）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var color=d3.scale.category10（）；
var arcs=svg.selectAll（“g.arc”）
.数据（饼图（数据集））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
.attr（“转换”、“转换”（“+outerRadius+”，“+outerRadius+”））//翻译（a，b）
arcs.append（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）；
arcs.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+弧形心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d.name+“：”+d.value；
});

但失败了，我不知道如何定义数据结构，也不知道如何对数据集进行饼图处理。pie（数据集）或pie（函数（d）{返回d.value}）；你能帮我纠正一下吗

javascript控制台告诉我没有定义。这是数据集名称的值。我不知道唯一的请求是数字值还是饼环的数字阵列。

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

几乎是直接从d3饼图示例中复制过来的，我输入了您的数据，它很有魅力

下面是代码，但我也强烈建议您仔细阅读教程，这样您就可以了解它的工作原理

<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>


馅饼圈
var w=600；
var h=600；
外部无功功率=w/2；
var innerRadius=w/3；
颜色=d3.scale.category20c（）；
数据=[{“标签”：“A”，“值”：5}，
{“label”：“C”，“value”：10}，
{“标签”：“F”，“值”：13}]；
var vis=d3。选择（“主体”）
.append（“svg:svg”）
.数据（[数据]）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换”（“+outerRadius+”，“+outerRadius+”））
var arc=d3.svg.arc（）
.outerRadius（outerRadius）
.内半径（内半径）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d.value；}）；
var arcs=vis.selectAll（“g.slice”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）；
arcs.append（“svg:path”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，弧）；
arcs.append（“svg:text”）
.attr（“转换”，函数（d）{
d、 内半径=内半径；
d、 外层=外层；
返回“平移（“+弧形心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.text（函数（d，i）{返回数据[i].label；}）；

请你的问题解释一下它是如何失败的，而不是简单地重复某件事出了问题（你为什么会在这里？）。感谢您提高了问题的参考价值，使其更易于回答！

<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>