d3多圈系列數據圖

Question

如何適應疊加第二組圓？

  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
    }]
  }]

並可以選擇添加其他數據集-創建2D金字塔金字塔的目的，該金字塔用代表不同數據集的不同彩色圓圈表示-最大的數據集取基圓。

http://jsfiddle.net/0aqvx66j/4/

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);
      });

}

最終甚至可以在不同的數據集之間切換，以始終將最大的圓圈作為背景。 像這樣

Answer 1

大多數情況只是在繪制數據之前組織數據。 在每個系列中，給每個項目一個索引，然后按值排序。 然后，index屬性將告訴我們該系列中每個項目的初始位置。 現在，每個系列中的第一項將是最大的價值。 使用它為每個系列建立一個偏移量，並對所有這些偏移量求和，以得出定位比例。

然后為每個系列制作組元素，使用我們計算出的偏移量進行定位。

在每個組中，繪制圓形元素。 自從我們對它們進行排序以來，它們將首先被繪制為最大。 .index屬性可用於按其在系列中的原始位置進行着色。

http://jsfiddle.net/0ht35rpb/2/

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); });

Answer 2

mgraham的答案很好！ 但是，由於我已經寫出了這些內容（然后不得不去開會），因此我將編寫以下代碼：

 $(document).ready(function() { var el = $('.serieschart'); var w = el.data("width"); var h = el.data("height"); var margin = { top: 65, right: 90, bottom: 5, left: 150 }; var svg = d3.select(el[0]).append("svg") .attr("class", "series") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = [{ "name": "Twitter", "items": [{ "value": 2000 }, { "value": 3000 }] }, { "name": "Facebook", "items": [{ "value": 300 }, { "value": 200 }] }, { "name": "Ebay", "items": [{ "value": 1000 }, { "value": 2000 }] }, { "name": "Foursquare", "items": [{ "value": 2000 }, { "value": 3000 }] }] // sort items array descending by size // this will help us draw the bigger one first // introduce an index for color assignment data.forEach(function(d){ d.items.forEach(function(d1,i){ d1.id = i; }) d.items.sort(function(x, y){ return d3.descending(x.value, y.value); }); }); circleMaker(); function circleMaker() { var colors = d3.scale.category10(); var counter = 0, prevR = 0; svg.selectAll("g") .data(data) .enter() .append("g") .selectAll("circle") .data(function(d){ return d.items; }) .enter() .append("circle") .attr("cy", 60) .attr("cx", function(d, i) { dr = Math.sqrt(d.value); if (i === 0) { counter += prevR + dr; prevR = dr; } return counter; }) .attr("r", function(d){ return dr; }) .style("fill", function(d){ return colors(d.id); }); } }); 

 body { background: #eeeeee; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <div id="holder"> <div class="serieschart" data-role="serieschart" data-width=450 data-height=180></div> </div>