javascript - snap - Árbol de burbujas en d3?
raphael js map (3)
Aqui tienes. No agregué el texto o las decoraciones, pero es la carne y las papas:
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>
¿Hay una implementación equivalente de un Bubble Tree en D3? En el enlace que proporcioné, Bubble Tree se implementó en RaphaelJS y jQuery.
La respuesta directa a su pregunta es no.
Usando los recursos en https://github.com/okfn/bubbletree/tree/master/build , la información que ya conoce, y la información provista en http://d3js.org/ y a través de la documentación de D3 en GitHub, debería ¡podrás conjurar tu propio árbol de burbujas para D3!
Esta es una pieza de JavaScript que utilicé hace mucho tiempo para visualizar datos de árbol binarios:
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());
};
¡Solo inserte algunos elementos circulares y manipúlelos un poco para darle estilo en una casa solariega circular y debe tener un buen programa establecido!
Puede usar el diseño del paquete , básicamente puede vincular los datos que desee con las formas en el gráfico y los parámetros personalizados para que se posicionen bien el uno con el otro. Otra alternativa sería el diseño de la fuerza.