javascript - 分离、排序的 d3 圆圈沿 X 轴显示

Question

我正在尝试使用 d3js.org 库实现以下显示:

我根据从 JSON 获取的属性让圆 svg 对象以不同的半径显示，但我遇到困难的地方是将它们组合在一起并沿线性水平轴显示。

这是我的 JSON 结构:

[
    {
        "category" : "Foo",
        "radius" : "3"
    },
    {
        "category" : "Bar",
        "radius" : "2"
    },
    {
        "category" : "Foo",
        "radius" : "3"
    },
    {
        "category" : "Bar",
        "radius" : "1"
    },
    {
        "category" : "Bar",
        "radius" : "2"
    },
    {
        "category" : "Foo",
        "radius" : "1"
    }
]

d3 Javascript

var height = 50,
    width = 540;

var companyProfileVis = d3.select(".myDiv").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")

d3.json("data/myData.json", function(data){

    companyProfileVis.selectAll("circle")
        .data(data)
        .enter()
            .append("circle")
            .attr("r", function (d) { return d.radius * 4; })
            .attr("cx", function(d) { return d.radius * 20; })
            .attr("cy", 20)

});

最后是我的 HTML

<div class="myDiv"></div>

Answer 1

稍微扩展 Pablo 的回答，您还需要对分组元素中的值进行排序，以实现图片中的顺序。代码如下所示。

var nested = d3.nest()
  .key(function(d) { return d.category; })
  .sortValues(function(a, b) { return b.radius - a.radius; })
  .entries(data);

nested selection基于此将如下所示。

var gs = svg.selectAll("g").data(nested)
  .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + (20 + i * 100) + ")"; });
gs.selectAll("circle").data(function(d) { return d.values; })
  .enter().append("circle");

请注意，您正在根据索引移动 g 元素，因此您稍后不必担心圆圈的 y 坐标。 x 坐标是根据索引计算的，类似于 g 的 y 坐标的计算方式。

您接下来要做的就是设置更多属性并附加 text 元素。完整演示 here .