Question

我正在绘制一个包含两个简单值的饼图：标签和值。这是我的json：

{
"valuecase": {
    "times": [
        {"label": "label", "value":5},
        {"label": "label", "value":13}
    ],
    "record": [
        {"label": "label", "value":5},
        {"label": "label", "value":13}
    ]
}

}

我不确定它是最好的结构，事实上d3.js我不能称之为数据值。这是我的代码：

d3.json("my.json", function(json) {
data = json.valuecase;
...selectAll("path")
.data(pie(dataset.times)) //*** How call the array, only value data??
}

有什么建议吗？

Answer 1

您需要将值数组传递给pie（）...您可以尝试 d3.layout.pie（）。value（function（d）{return d.value;}）; ......

d3.json("myjson.json", function(json) {

    var data = json.valuecase

    var w = 300,                           
    h = 300,   
    r = 100, 
    color = d3.scale.category20c();         
var vis = d3.select("body")
.append("svg:svg")             
.data([data.times])                   
.attr("width", w)
.attr("height", h)
        .append("svg:g")                
        .attr("transform", "translate(" + r + "," + r + ")")    

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

var pie = d3.layout.pie()                   
  .value(function(d) { console.log(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 = 0;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")";        
        })
.attr("text-anchor", "middle")                                      
  .text(function(d, i) { return data.times[i].value; });        
});

d3.js json结构添加数据

1 个答案: