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