Albero bolla in d3?

Question

Esiste un'implementazione equivalente di Bubble Tree in D3? Nel link che ho fornito, il Bubble Tree è stato implementato in RaphaelJS e jQuery.

Answer 1

La risposta chiara alla sua domanda è no.

Utilizzando le risorse a https://github.com/okfn/bubbletree/tree/master/build, le informazioni che si conosce già, e le informazioni fornite sul http://d3js.org/ e attraverso la documentazione di D3 su GitHub, si dovrebbe essere in grado di evocare il vostro albero bolla per D3!

Questo è un pezzo di codice JavaScript ho usato molto tempo fa di visualizzare dati binari albero:

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

Basta inserire alcuni elementi circolari e manipolare un po 'per lo stile in un maniero circolare e si dovrebbe avere un buon programma impostato!

Answer 2

È possibile utilizzare the pack layout, in pratica è possibile associare tutti i dati che si desidera alle forme nel grafico e i parametri personalizzati affinché si posizionino bene l'uno rispetto all'altro. Un'altra alternativa sarebbe la disposizione della forza.

Answer 3

Ecco qui. non ho aggiunto il testo o le decorazioni, ma è la carne e le patate:

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>