分离，排序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

您可以使用d3.nest按类别对数据项进行分组，然后使用nested selections创建两组圆圈。

// Nest the items by category
var nestedData = d3.nest(data)
   .key(function(d) { return d.category; })
   .map(data, d3.map)
   .values();

这将为您提供以下数组：

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

此致

Answer 2

扩展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坐标的计算基于类似于为y计算g坐标的方式的索引。

您需要做的就是设置更多属性并添加text元素。完整演示here。