d3.js系列圓形圖表

Question

我期待創建一個這樣的圖表 - 它顯示了水平面上的各種不同關係。

所以我設想中的數據會看起來像這樣

[{ 
    "name": "Twitter", 
    "vistsperday": "15 billion", 
    "employeecount": 450 
}, { 
    "name": "Facebook", 
    "vistsperday": "5 billion", 
    "employeecount": 2000 
}, { 
    "name": "Google", 
    "vistsperday": "5 billion", 
    "employeecount": 25000 
}, { 
    "name": "Netflix", 
    "vistsperday": "10 billion", 
    "employeecount": 2200 
}, { 
    "name": "Ebay", 
    "vistsperday": "8 billion", 
    "employeecount": 17700 
}, { 
    "name": "Klout", 
    "vistsperday": "2 billion", 
    "employeecount": 45 
}] 

我已經在這裏開始的jsfiddle。 從https://bost.ocks.org/mike/circles/推導 - 三個小圓圈 *最新小提琴 - http://jsfiddle.net/NYEaX/1425/

• 我有第一個問題 - 是陣列中所有的數據必須是不同的價值觀，否則圈子將不會呈現
• 如何縮小這些圈子 - 我試圖調整cx公式，但沒有影響。

這裏是最新的小提琴的代碼的當前結構。

//代碼

 $(document).ready(function() { 

    var rawData = [{ 
    "name": "Twitter", 
    "vistsperday": "15 billion", 
    "employeecount": 450 
    }, { 
    "name": "Facebook", 
    "vistsperday": "5 billion", 
    "employeecount": 2000 
    }, { 
    "name": "Google", 
    "vistsperday": "5 billion", 
    "employeecount": 25000 
    }, { 
    "name": "Netflix", 
    "vistsperday": "10 billion", 
    "employeecount": 2200 
    }, { 
    "name": "Ebay", 
    "vistsperday": "8 billion", 
    "employeecount": 17700 
    }, { 
    "name": "Klout", 
    "vistsperday": "2 billion", 
    "employeecount": 45 
    }]; 



    var width = 700; 
    var height = 500; 
    var margin = { 
    top: 20, 
    right: 100, 
    bottom: 30, 
    left: 100 
    } 

    //serieschart 
    var svg = d3.select(".serieschart").append("svg") 
    .attr("class", "serieschart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var bluedata = [5000,2000,2000,1600,701,1603]; 

    //blue layer 
    var bluelayer = svg.append("g") 
           .attr("class", "bluelayer") 

    var bluecircle = bluelayer.selectAll("circle") 
    .data(bluedata); 

    bluecircle.enter().append("circle") 
    .attr("class", "blue") 
    .attr("cy", 60) 
    .attr("cx", function(d, i) { 
     return (i * 60) + 10; 
    }) 
    .attr("r", function(d) { 
     return Math.sqrt(d); 
    }); 

    bluecircle.exit().remove(); 


    var golddata = [32, 57, 293,31, 455, 296]; 
    //gold layer 
    var goldlayer = svg.append("g") 
           .attr("class", "goldlayer") 

    var goldcircle = goldlayer.selectAll("circle") 
    .data(golddata); 

    goldcircle.enter().append("circle") 
    .attr("class", "gold") 
    .attr("cy", 60) 
    .attr("cx", function(d, i) { 
     return (i * 60) + 10; 
    }) 
    .attr("r", function(d) { 
     return Math.sqrt(d); 
    }); 

    goldcircle.exit().remove(); 



}); 

Answer 1

對於第一個問題：

var bluecircle = bluelayer.selectAll("circle") 
    .data(bluedata); 

否則，當你到

.attr("cx", function(d, i) { 
     return (i * 100) + 10; 
    }) 

是同樣將在曾經代表元素cx功能。

對於第二個問題，編輯你的cx例如像這樣：

.attr("cx", function(d, i) { 
     return (i * 80) + 10; 
    }) 

http://jsfiddle.net/3ky4wvgm/

祝你好運！ :)

Answer 2

我已經掛鉤到一個原始數據源來嘗試和控制應用程序。

http://jsfiddle.net/59bunh8u/23/ 我試着改變一些值 - 在-versing他們幾乎看到圖表如何適應 - 但它開始與指針撕裂。 http://jsfiddle.net/59bunh8u/24/

M-4.78125,125L44.78125,125 75.50572494064927,60 

當我改變路徑，以減少將L的座標它幾乎修正錯誤 - 它幾乎像路徑的L個部分被錯誤地繪製。

M-4.78125,125L4.78125,125 75.50572494064927,60