d3中的泡泡樹？

Question

D3中是否有相應的Bubble Tree實現？ 在我提供的鏈接中，Bubble Tree是在RaphaelJS和jQuery中實現的。

Answer 1

你問題的直接答案是否定的。

使用https://github.com/okfn/bubbletree/tree/master/build上的資源，您已經知道的信息，以及http://d3js.org/上提供的信息以及通過D3的GitHub文檔，您應該能夠為D3創造自己的泡泡樹！

這是我很久以前用來可視化二叉樹數據的一段JavaScript：

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

只需插入一些圓形元素並稍微操縱它以在圓形庄園中進行設計，你應該有一個好的程序集！

Answer 2

干得好。 我沒有添加文字或裝飾，但它是肉和土豆：

 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 3

您可以使用包布局 ，基本上您可以將所需的任何數據綁定到圖形中的形狀和自定義參數，以便它們彼此之間保持良好的關系。 另一種選擇是力量布局。