了解d3多焦点布局

Question

我试图了解这个美丽的例子是如何运作的......

http://bl.ocks.org/mbostock/1804919

我看到聚类是通过节点的颜色完成的，但我对碰撞检测功能中的相关行感到困惑......

r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;

你怎么能＆＃34;添加＆＃34;比较颜色的产物＆＃34; d.color＆＃34;和＆＃34; quad.point.color＆＃34;？我会假设这只会返回真/假？无论哪种方式，我不确定我是否只遵循这种颜色参考会产生所需的颜色聚类效果？

无论如何，我还没有能够找到碰撞检测功能的任何逐行描述，所以我真的希望这里有人能够理解它，以帮助解释这一点。咬我的

我最终试图实现的是通过另一个非数字节点属性（例如d.person_name！== quad.point.person_name）使示例适应集群。

谢谢！

Answer 1

您要问的是计算节点之间的允许距离，将节点之间的距离（l）与r进行比较，以确定d和quad.point之间是否存在冲突padding。如果节点具有相同的颜色，则将值// Move nodes toward cluster focus. function gravity(alpha) { return function(d) { d.y += (d.cy - d.y) * alpha; d.x += (d.cx - d.x) * alpha; }; } 添加到节点之间的允许距离。布尔结果被上下文强制转换为数字类型 而不是假设JS做了什么，它很容易打开浏览器工具，只需键入表达式，看看结果是什么......

但是碰撞检测不涉及聚类，这由此代码处理......

cx

如果您有一些数据并且想要使用相同的代码按特定属性对它们进行分组，那么您需要在数据中添加cy和cx属性，以便使用相同的属性值（该值不需要是数字）具有相同的cy和var width = 600, height = 200, padding = 6, // separation between nodes maxRadius = 6; var n = 200, // total number of nodes names = ["Givens", "Crowder", "Lannister", "Baratheon", "Stark"], m = names.length; // number of distinct clusters var color = d3.scale.category10() .domain(d3.range(m)); var x = d3.scale.ordinal() .domain(names) .rangePoints([0, width], 1), legend = d3.svg.axis() .scale(x) .orient("top") var nodes = d3.range(n).map(function() { var i = Math.floor(Math.random() * m), v = (i + 1) / m * -Math.log(Math.random()); return { radius: Math.sqrt(v) * maxRadius, color: color(i), cx: x(names[i]), cy: height / 2 }; }); var force = d3.layout.force() .nodes(nodes) .size([width, height]) .gravity(0) .charge(0) .on("tick", tick) .start(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height), gLegend = svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0, " + height * 0.9 + ")") .call(legend); gLegend.selectAll(".tick text") .attr("fill", function(d, i) { return color(i); }); var circle = svg.selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", function(d) { return d.radius; }) .style("fill", function(d) { return d.color; }) .call(force.drag); function tick(e) { circle .each(gravity(.2 * e.alpha)) .each(collide(.5)) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } // Move nodes toward cluster focus. function gravity(alpha) { return function(d) { d.y += (d.cy - d.y) * alpha; d.x += (d.cx - d.x) * alpha; }; } // Resolve collisions between nodes. function collide(alpha) { var quadtree = d3.geom.quadtree(nodes); return function(d) { var r = d.radius + maxRadius + padding, nx1 = d.x - r, nx2 = d.x + r, ny1 = d.y - r, ny2 = d.y + r; quadtree.visit(function(quad, x1, y1, x2, y2) { if (quad.point && (quad.point !== d)) { var x = d.x - quad.point.x, y = d.y - quad.point.y, l = Math.sqrt(x * x + y * y), r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding; if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l; d.y -= y *= l; quad.point.x += x; quad.point.y += y; } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); }; }值。

示例（this的修改版本）

＆＃13;

＆＃13;

circle {
  stroke: #000;
}
.x.axis path {
  fill: none;
}
.x.axis text {
  font-family: Papyrus, Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
body {
  background-color: black;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

＆＃13;

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope, $http) {
	
$http.get("/users").success(function(response) {
	$scope.res = JSON.stringify(response);
});

});

＆＃13;

＆＃13;

＆＃13;