Cây bong bóng trong d3?

Question

Có triển khai tương đương với số Bubble Tree trong D3 không? Trong liên kết mà tôi đã cung cấp, Cây bong bóng đã được triển khai trong RaphaelJS và jQuery.

Answer 1

Câu trả lời thẳng cho câu hỏi của bạn là không.

Sử dụng tài nguyên tại https://github.com/okfn/bubbletree/tree/master/build, thông tin bạn đã biết và thông tin được cung cấp trên http://d3js.org/ và thông qua tài liệu của D3 trên GitHub, bạn sẽ có thể gợi lên cây bong bóng của riêng bạn cho D3!

Đây là một mảnh của JavaScript tôi đã sử dụng một thời gian dài trước đây để hình dung dữ liệu nhị phân cây:

var updateVisual; 

updateVisual = function() { 
    var drawTree, out; 
    drawTree = function(out, node) { 
     var col, gray, i, line, lineElt, lines, sub, _results, _results1; 
     if (node.lines) { 
      out.appendChild(document.createElement("div")).innerHTML = "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px"; 
      lines = out.appendChild(document.createElement("div")); 
      lines.style.lineHeight = "6px"; 
      lines.style.marginLeft = "10px"; 
      i = 0; 
      _results = []; 
      while (i < node.lines.length) { 
       line = node.lines[i]; 
       lineElt = lines.appendChild(document.createElement("div")); 
       lineElt.className = "lineblock"; 
       gray = Math.min(line.text.length * 3, 230); 
       col = gray.toString(16); 
       if (col.length === 1) col = "0" + col; 
       lineElt.style.background = "#" + col + col + col; 
       console.log(line.height, line); 
       lineElt.style.width = Math.max(Math.round(line.height/3), 1) + "px"; 
       _results.push(i++); 
      } 
      return _results; 
     } else { 
      out.appendChild(document.createElement("div")).innerHTML = "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px"; 
      sub = out.appendChild(document.createElement("div")); 
      sub.style.paddingLeft = "20px"; 
      i = 0; 
      _results1 = []; 
      while (i < node.children.length) { 
       drawTree(sub, node.children[i]); 
       _results1.push(++i); 
      } 
      return _results1; 
     } 
    }; 
    out = document.getElementById("btree-view"); 
    out.innerHTML = ""; 
    return drawTree(out, editor.getDoc()); 
}; 

Chỉ cần chèn một số yếu tố hình tròn và vận dụng nó một chút phong cách trong một dinh thự tròn và bạn nên có một chương trình tốt được thiết lập!

Answer 2

Bạn có thể sử dụng the pack layout, về cơ bản bạn có thể ràng buộc bất kỳ dữ liệu nào bạn muốn các hình dạng trong biểu đồ và thông số tùy chỉnh để chúng có vị trí phù hợp với nhau. Một lựa chọn khác sẽ là bố cục lực.

Answer 3

Thông tin cho bạn đây. Tôi không thêm văn bản hoặc đồ trang trí, nhưng đó là thịt và khoai tây:

function bubbleChart(config) { 
 
\t 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) { 
 
\t \t selection.each(function(data) { 
 
\t \t \t 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); 
 
\t \t \t radiusScale.domain([0, sum]).range([0, smallestDimension/6]); 
 
     var svg = d3.select(this).selectAll('svg').data([data]), 
 
      svgEnter = svg.enter().append('svg'); 
 
\t \t \t svg.attr('width', outerWidth).attr('height', outerHeight); 
 
\t \t \t 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); 
 
     }); 
 
\t \t }); 
 
\t }; 
 
\t result.aspectRatio = function(value) { 
 
\t \t if(value === undefined) return aspectRatio; 
 
\t \t aspectRatio = value; 
 
\t \t return result; 
 
\t }; 
 
\t result.margin = function(value) { 
 
\t \t if(value === undefined) return margin; 
 
\t \t margin = value; 
 
\t \t return result; 
 
\t }; 
 
\t 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>