繪製d3.svg.arc元素使用數組中存儲的數據d3.js

Question

嗨，我試圖多次繪製coxcomb charts。代碼繪製一個這樣的圖表。 jsfiddle example

我碰到的問題是：如何排序我的數據，使其能夠繪製多個這樣的圖表？

//data 
var data = [ 
    {"label": "January", "value": 150, "time": 1}, 
    {"label": "February", "value": 65, "time": 2}, 
    {"label": "March", "value": 50, "time": 3}, 
    {"label": "April", "value": 75, "time": 4}, 
    {"label": "May", "value": 150, "time": 5}, 
    {"label": "June", "value": 65, "time": 6} 
]; 

//container 
var svg = d3.select("body") 
.append("svg:svg") 
.attr("width", 1000) 
.attr("height", 1000); 

var pi = Math.PI; 

var arc = d3.svg.arc() 
     .innerRadius(0) 
     .outerRadius(function(d,i) {return (0 + d.value); }) 
     .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi/180); }) 
     .endAngle(function(d) { return (d.time * 60 * pi/180); }); 

var chartContainer = svg.append("g") 
     .attr('class', 'some_class') 
     .attr("transform", "translate(450, 300)"); 

chartContainer.selectAll("path") 
     .data(data) 
     .enter() 
     .append("path") 
     .attr("d", arc) 
     .attr("class", "arc"); 

我想我或許可以通過以下方式對數據進行排序：

var data2 = [ 
{label: "Rose.chart1", value: [150,65,50,75,150,65]} 
{label: "Rose.chart2", value: [130,50,30,10,50,70]} 
] 

但那就意味着我將不得不重新編寫如下：

1）定義弧變量

var arc = d3.svg.arc() 
     .innerRadius(0) 
     .outerRadius(function(d,i) {return (0 + d.value); }) 
     .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi/180); }) 
     .endAngle(function(d) { return (d.time * 60 * pi/180); }); 

2.）將數據綁定到選擇

chartContainer.selectAll("path") 
     .data(data) 
     .enter() 
     .append("path") 
     .attr("d", arc) 
     .attr("class", "arc"); 

我想我可能會需要輸入數據對象（數據2），並再次爲價值元素。 請原諒我的描述。

function(d.value) {???} 

Answer 1

先將數據嵌套爲數組數組。所以你必須：

//data 
var data = [ 
    [ 
    {"label": "January", "value": 150, "time": 1}, 
    {"label": "February", "value": 65, "time": 2}, 
    {"label": "March", "value": 50, "time": 3}, 
    {"label": "April", "value": 75, "time": 4}, 
    {"label": "May", "value": 150, "time": 5}, 
    {"label": "June", "value": 65, "time": 6} 
    ], 
    [ 
    {"label": "January", "value": 123, "time": 1}, 
    {"label": "February", "value": 62345, "time": 2}, 
    {"label": "March", "value": 5340, "time": 3}, 
    {"label": "April", "value": 72315, "time": 4}, 
    {"label": "May", "value": 11350, "time": 5}, 
    {"label": "June", "value": 6135, "time": 6} 
    ], 
]; 

然後窩在父容器的圖表，綁定到數據：

svg.selectAll(".charts") 
    .data(data) 
    .enter() 
     .append("g") 
     // Translate each chart based on 'i' 
     .attr("transform", function(d, i) { return "translate(" + ((i+1) * 450) + ", 300)"); 
     .each(function(chartData, i) { 
     var chartContainer = d3.select(this);// Selects the containing 'g' 
     // The rest is what you already wrote 
     chartContainer.selectAll("path") 
      .data(data) 
      .enter() 
      .append("path") 
      .attr("d", arc) 
      .attr("class", "arc"); 
     });