Question

我正在进行气泡图可视化，这可以通过使用散点图来实现。但是，我没有明确的圆圈x，y坐标，我想简单均匀地将它们分布在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;
    });

Answer 1

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

Answer 2

如果我理解正确，你的数据集可能有48个项目（例如），你想要显示8个横圈和6个圆圈（例如）？

试试这个：

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

如何在d3中统一分发svg圈

2 个答案: