D3中的气泡树?

2021/01/23 13:11 · jquery ·  · 0评论

D3中是否有气泡树的等效实现在我提供的链接中,气泡树是在RaphaelJS和jQuery中实现的。

在此处输入图片说明

您问题的直接答案是“否”。

使用https://github.com/okfn/bubbletree/tree/master/build上的资源,您已经知道的信息以及http://d3js.org/上提供的信息以及通过GitHub上D3的文档,您应该能够为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());
};

只需插入一些圆形元素并对其进行一些操作即可在圆形庄园中进行样式设置,您应该有一个不错的程序集!

干得好。我没有添加文字或装饰,但是是肉和土豆:

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>

您可以使用pack布局,基本上可以将所需的任何数据绑定到图形中的形状和自定义参数,以使它们相互之间定位良好。另一种选择是力的布局。

本文地址:http://jquery.askforanswer.com/d3zhongdeqipaoshu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!