D3ドーナツのオブジェクト

Question

d3.jsのドーナツでどのように配列を使うことができるのか分かりますが、オブジェクトがどのように動作するのか分かりません。d3.js。オブジェクトをレンダリングするから、私は値を希望

var width = 175, 
    height = 175, 
    radius = Math.min(width, height)/2, 
    donutWidth = 23; 
var color = d3.scaleOrdinal(d3.schemeCategory20); 
var data = [{ 
    user: 'Bob', 
    value: 100 
    }, 
    { 
    user: 'Danny', 
    value: 200 
    } 
]; 

function render(data) { 
    //data = [100,250]; 
    var svg = d3.select("#pot").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    var svg_g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    var pie = d3.pie() 
    .sort(null); 
    var arc = d3.arc() 
    .innerRadius(radius - donutWidth) 
    .outerRadius(radius); 
    var path = svg_g.selectAll("path") 
    .data(pie(data)); 
    var pathEnter = path.enter().append("path") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    var pathUpdate = path.attr("d", arc); 
} 

render(data); 

JSFiddle

コード：

は、私は、出力に次のオブジェクトをしたいと思います。

Answer 1

あなたが追加する必要がありますドーナツの値を表示する必要がある場合：var pie = d3.pie()で

.value(function(d) { return d.value })。このような

何か：

(function() { 
 
    var width = 175, 
 
    height = 175, 
 
    radius = Math.min(width, height)/2, 
 
    donutWidth = 23; 
 
    var color = d3.scaleOrdinal(d3.schemeCategory20); 
 
    var data = [{ 
 
    user: 'Bob', 
 
    value: 100 
 
    }, { 
 
    user: 'Danny', 
 
    value: 200 
 
    }, { 
 
    user: 'Test', 
 
    value: 50 
 
    }]; 
 

 
    function render(data) { 
 
    var svg = d3.select("#pot").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
    var svg_g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
    var pie = d3.pie().value(function(d) { 
 
     return d.value 
 
     }) 
 
     .sort(null); 
 
    var arc = d3.arc() 
 
     .innerRadius(radius - donutWidth) 
 
     .outerRadius(radius); 
 
    var path = svg_g.selectAll("path") 
 
     .data(pie(data)); 
 
    var pathEnter = path.enter().append("path") 
 
     .attr("fill", function(d, i) { 
 
     return color(i); 
 
     }) 
 
     .attr("d", arc) 
 
    var pathUpdate = path.attr("d", arc); 
 
    } 
 
    render(data); 
 
})();

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<div id="pot"></div>