Bubble Baum in d3?

Question

Gibt es eine äquivalente Implementierung eines Bubble Tree in D3? In dem von mir bereitgestellten Link wurde der Bubble Tree in RaphaelJS und jQuery implementiert.

Answer 1

Die direkte Antwort auf Ihre Frage lautet: Nein.

Verwenden Sie die Ressourcen unter https://github.com/okfn/bubbletree/tree/master/build, die Informationen, die Sie bereits kennen, und die Informationen auf http://d3js.org/ und durch D3-Dokumentation auf GitHub, sollten Sie in der Lage sein, Ihre eigenen Blase Baum für D3 zu zaubern!

Dies ist ein Stück von JavaScript ich vor langer Zeit verwendet, um binäre Baumdaten zu visualisieren:

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

einfach ein paar kreisförmige Elemente einfügen und es ein wenig Stil in einem kreisförmigen Herren manipulieren und Sie sollten ein haben gutes Programm!

Answer 2

Sie können the pack layout verwenden, im Grunde können Sie alle gewünschten Daten an die Formen im Diagramm und benutzerdefinierte Parameter binden, damit sie sich gegenseitig gut positionieren. Eine andere Alternative wäre das Kraftlayout.

Answer 3

Hier gehen Sie. Ich habe Fügen Sie nicht den Text oder Dekorationen, aber es ist das Fleisch und Kartoffeln:

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>