Javascript d3多圆系列数据表

这将如何调整以叠加第二组圆

  var data = [{
    "name": "Twitter",
    "items": [{
      "value": 2000
    }, {
      "value": 3000
    }]
  }, {
    "name": "Facebook",
    "items": [{
      "value": 200
    }, {
      "value": 300
    }]
  }, {
    "name": "Ebay",
    "items": [{
      "value": 1000
    }, {
      "value": 2000
    }]
  }, {
    "name": "Foursquare",
    "items": [{
      "value": 2000
    }, {
      "value": 3000
    }]
  }]

通过添加其他数据集的选项（目标是创建一个二维金字塔排序，用不同颜色的圆圈表示不同的数据集），以最大的数据集为基准圆

最终甚至可能在不同的数据集之间切换，以始终放置最大的圆作为背景。就这样

---

其中大部分只是在绘制数据之前对数据进行组织。在每个系列中，给每个项目一个索引，然后按值排序。index属性将告诉我们序列中每个项目的初始位置。每个系列中的第一项现在将是最大的价值。使用此选项可为每个系列构建偏移，并将所有这些偏移相加以生成定位比例

然后为每个系列创建组元素，使用我们计算的偏移量进行定位

在每组中，绘制圆元素。既然我们把它们分类了，它们将首先被抽取出来。.index属性可用于按其在系列中的原始位置着色

---

米格拉汉姆的回答很好！但因为我已经写了这篇文章，然后不得不去参加一个会议，所以我将如何编写它：

$document.readyfunction{ 变量el=$'.seriescart'； var w=el.datawidth； var h=el.dataheight； var保证金={ 排名：65， 右:90,， 底部：5， 左：150 }; var svg=d3.selectel[0]。appendsvg .类别、系列 .attrwidth，w+边距。左+边距。右 .attr高度，h+页边距.top+页边距.bottom .附录 .attransform，translate+margin.left+，+margin.top+； 风险值数据=[{ 名称：推特， 项目：[{ 价值：2000 }, { 价值：3000 }] }, { 姓名：Facebook， 项目：[{ 价值：300 }, { 价值：200 }] }, { 名称：易趣， 项目：[{ 价值：1000 }, { 价值：2000 }] }, { 名称：Foursquare， 项目：[{ 价值：2000 }, { 价值：3000 }] }] //按大小降序排列数组中的项目 //这将有助于我们先画大一点的 //引入颜色分配索引 data.foreachd函数{ d、 项目1、1、1{ d1.id=i； } d、 items.SortFunction x，y{ 返回d3.downingx.value，y.value； }; }; 圆圈制造者； 函数环路生成器{ var colors=d3.scale.category10； 变量计数器=0， prevR=0； svg.selectAllg .数据 进来 .附录 .selectAllcircle .datafunctiond{ 归还d.物品； } 进来 A.附加圆 .自然减员，60 .attrcx，函数，i{ d、 r=数学sqrtd.value； 如果i==0{ 计数器+=上一个计数器+d.r； prevR=d.r； } 返回计数器； } .attrr，已运行{ 返回d.r； } .stylefill，函数{ 返回colorsd.id； }; } }; 身体{ 背景：EEEE； }

---

第二组圆是items数组中的第二个值吗？当然-{name:Twitter，items:[{value:2000}，{value:3000}想法是-如果我们添加了第三组-然后显示3个圆，但以最大的圆为基础，然后将其构建为2D金字塔。这是您应该在问题中包含的重要信息。我添加了一个系列id-因此我的意思是，这将有助于确保圆正确绘制，这基本上是@mgraham和我所做的。我们只是用一个.forEach动态地做了一下……我明白了——下一步可能是添加标签——我很想开始在上面添加指针/标签——事实上，我做了一个省略，我做了一个位置刻度，但后来没有使用它……现在修复了——系列id——jsfiddle.net/0ht35rpb/4——如何确保有一个系列id——以确保数据集不会被删除我明白了，下一步可能是添加标签，希望开始在上面添加指针/标签，对标签有什么建议吗？

function circleMaker() {


    var counter = 0;
    series = 0


    var set = svg.append("g")
      .attr("class", "series" + series);

    set.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("class", "series" + series)
      .attr("cy", 60)
      .attr("cx", function(d, i) {
        if (i) {
          return (counter += Math.sqrt(data[i - 1].items[series].value) + Math.sqrt(data[i].items[series].value));
        } else {
          return counter;
        }
      })
      .attr("fill", function(d, i) {
        var colorArray = ["#00ccff", "#fcdd0a"];
        return colorArray[series];
      })
      .attr("r", function(d) {
        return Math.sqrt(d.items[series].value);
      });

}

var width = 600;
var height = 400;
var svg = d3.select('svg').attr("width", width).attr("height",height);


  var data = [{
    "name": "Twitter",
    "items": [{
      "value": 2000
    }, {
      "value": 3000
    }]
  }, {
    "name": "Facebook",
    "items": [{
      "value": 200
    }, {
      "value": 300
    }]
  }, {
    "name": "Ebay",
    "items": [{
      "value": 2000
    }, {
      "value": 1000
    }]
  }, {
    "name": "Foursquare",
    "items": [{
      "value": 2000
    }, {
      "value": 3000
    },
    {
      "value": 4000
    }]
  }];


  // organise the data. 
  // Insert indices and sort items in each series
  // keep a running total of max circle size in each series
  // for later positioning
  var x = 0;
  var totalWidth = d3.sum (
    data.map (function (series) {
      series.items.forEach (function (item, i) {
            item.index = i;
      });
      series.items.sort (function (a, b) {
        return b.value - a.value;
      });
      var maxr = Math.sqrt(series.items[0].value);
      x += maxr;
      series.xcentre = x;
      x += maxr;
      return maxr * 2;
    })
  );

  // make scales for position and colour
  var scale = d3.scale.linear().domain([0,totalWidth]).range([0, width]);
  var colScale = d3.scale.category10();

  // add a group per series, position the group according to the values and position scale  we calculated above
 var groups = svg.selectAll("g").data(data);
 groups.enter().append("g");
 groups.attr("transform", function(d) {
        return ("translate("+scale(d.xcentre)+",0)");
 });

 // then add circles per series, biggest first as items are sorted
 // colour according to index (the property we inserted previously so we can
 // keep track of their original position in the series)
 var circles = groups.selectAll("circle").data(function(d) { return d.items;}, function(d) { return d.index; });
 circles.enter().append("circle").attr("cy", height/2).attr("cx",0);

 circles
    .attr("r", function(d) { return scale(Math.sqrt (d.value)); })
  .style ("fill", function (d) { return colScale(d.index); });