如何在d3中均匀分布svg圈子

我正在使用气泡图表可视化，这可以通过使用散点图来实现。但是，我没有明确的x，y坐标，我想简单均匀地将它们均匀分布在svg主体中。下面将它们沿着一条线分布 - 我想要一个漂亮的泡泡图效果。如何在d3中均匀分布svg圈子

//Width and height 
    var w = 1000; 
    var h = 1000; 

    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", w) 
     .attr("height", h) 
     .attr("class", "bubble") 

    var circles = svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle"); 

    var scale = d3.scale.linear() 
     .domain([0, 1]) 
     .range([10, 100]); 


    circles.attr("cx", function(d, i) { 
     return (i * 50) + 25; 
     }) 
    .attr("cy", h/2) 
    .attr("r", function(d) { 
     return scale(d[1][1]); 
    }) 
    .attr("fill", "yellow") 
    .attr("stroke", "orange") 
    .attr("stroke-width", function(d) { 
     return 100*d[1][1]/2; 
    });

来源

2014-11-24 user1452494

这真的取决于你的数据集是什么，要如何将其映射数据的cx，cy，r和fill属性。正如您为r所做的那样，您可以提供对数据集中的每个元素起作用并返回所需值的函数。我建议使用x和y以及r的缩放比例，并重命名它们，以便将它们分开。还有一些很棒的color scales。你的半径标度应该是一个平方根标度（d3.scale.sqrt()），而不是线性的，以便气泡区域编码数据而不是其高度。（因此，可视化思想领袖advise you against bubbles。）

来源

2014-11-24 13:41:51 mgold

如果我正确理解了这一点，那么您的数据集可能有48个项目（例如），并且您想要显示八个横跨和六个横向（例如）的圆圈？

试试这个：

.attr("cx", function(d,i){return i%8 * 50 + 25;}) 
.attr("cy", function(d,i){return Math.floor(i/8) * 50 + 25;})

来源

2014-11-25 09:27:20

如何在d3中均匀分布svg圈子

回答

相关问题