javascript - d3のバブルツリー？

Question

D3にバブルツリーの同等の実装はありますか？私が提供したリンクでは、バブルツリーはRaphaelJSとjQueryに実装されていました。

Answer 1

Here you go. I didn't add the text or decorations, but it's the meat and potatoes:

function bubbleChart(config) {
	var aspectRatio = 1,
      margin = { top: 0, right: 0, bottom: 0, left: 0 },
      radiusScale = d3.scale.sqrt(),
      scan = function(f, data, a) {
        a = a === undefined ? 0 : a;
        var results = [a];
        data.forEach(function(d, i) {
          a = f(a, d);
          results.push(a);
        });
        return results;
      },
      colorScale = d3.scale.category20(),
      result = function(selection) {
		selection.each(function(data) {
			var outerWidth = $(this).width(),
          outerHeight = outerWidth / aspectRatio,
          width = outerWidth - margin.left - margin.right,
          height = outerHeight - margin.top - margin.bottom,
          smallestDimension = Math.min(width, height),
          sum = data[1].reduce(function(a, d) {
            return a + d[1];
          }, 0),
          radiusFractions = data[1].map(function(d) {
            return Math.sqrt(d[1] / sum);
          }),
          radiusNormalSum = radiusFractions.reduce(function(a, d) {
            return a + d;
          }, 0),
          scanned = scan(function(a, d) {
            return a + d;
          }, radiusFractions.map(function(d) {
            return d / radiusNormalSum;
          }), 0);
			radiusScale.domain([0, sum]).range([0, smallestDimension / 6]);
      var svg = d3.select(this).selectAll('svg').data([data]),
          svgEnter = svg.enter().append('svg');
			svg.attr('width', outerWidth).attr('height', outerHeight);
			var gEnter = svgEnter.append('g'),
          g = svg.select('g').attr('transform', 'translate(' + margin.left + ' ' + margin.top + ')'),
          circleRing = g.selectAll('circle.ring').data(data[1]),
          circleRingEnter = circleRing.enter().append('circle').attr('class', 'ring');
      circleRing.attr('cx', function(d, i) {
        return smallestDimension / 3 * Math.cos(2 * Math.PI * (scanned[i] + scanned[i + 1]) / 2) + width / 2;
      }).attr('cy', function(d, i) {
        return smallestDimension / 3 * Math.sin(2 * Math.PI * (scanned[i] + scanned[i + 1]) / 2) + height / 2;
      }).attr('r', function(d) {
        return radiusScale(d[1]);
      }).style('fill', function(d) {
        return colorScale(d[0]);
      });
      var circleMain = g.selectAll('circle#main').data([data[0]]),
          circleMainEnter = circleMain.enter().append('circle').attr('id', 'main');
      circleMain.attr('cx', width / 2).attr('cy', height / 2).attr('r', radiusScale(sum)).style('fill', function(d) {
        return colorScale(d);
      });
		});
	};
	result.aspectRatio = function(value) {
		if(value === undefined) return aspectRatio;
		aspectRatio = value;
		return result;
	};
	result.margin = function(value) {
		if(value === undefined) return margin;
		margin = value;
		return result;
	};
	return result;
}

var myBubbleChart = bubbleChart().margin({
  top: 1,
  right: 1,
  bottom : 1,
  left: 1
});
var data = ['Random Names, Random Amounts', [['Immanuel', .4], ['Pascal', 42.9], ['Marisa', 3.3], ['Hadumod', 4.5], ['Folker', 3.2], ['Theo', 4.7], ['Barnabas', 1.0], ['Lysann', 11.1], ['Julia', .7], ['Burgis', 28.2]]];
d3.select('#here').datum(data).call(myBubbleChart);

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="here"></div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

パック レイアウトを使用できます。基本的には、必要なデータをグラフ内の形状にバインドし、それらが互いに適切に配置されるようにカスタム パラメータをバインドできます。もう 1 つの選択肢は、フォース レイアウトです。