Question

我遇到了一些数学问题，我觉得这应该很容易解决，但我错过了一些信息哈哈。

如果你看一下我在这里设置的小提琴：http://jsfiddle.net/e9ds5/。您可以看到所有“节点”是如何对齐的。我要做的是让中心的节点标题为“一个”，其他所有节点都位于其外部。

因此，所有节点必须关闭的当前角度是90度（外围4个项目）。因此我认为我应该能够做到

var getAngle = function(ang) {
    return {x: Math.cos(ang), y: Math.sin(ang)};
}

然后当我想以那个角度出发时

  var centerX = function (d, i) {
    return (getAngle(ang_inc).x * i) * 100 + base.x;
  };

  var centerY = function (a, i) {
    return (getAngle(ang_inc).y * i) * 100 + base.y;
  }

谢谢大家，尽量不要对我的次级平均数学能力苛刻哈哈

Answer 1

Math.sin和Math.cos期望弧度的角度，使用2 * Math.PI作为整圆。

或使用

中的转化

  var getAngle = function(ang) {
    ang_in_rad = (ang*Math.PI)/180;
    return {x: Math.cos(ang_in_rad), y: Math.sin(ang_in_rad)};
  }

在中心功能中，您需要角度的倍数，而不是半径。所以将angle_inc与i相乘。但是，当半径不乘以pi时会发生奇怪的事情。因此，以特殊方式处理特殊情况i == 0以获得半径为零。

  var centerX = function (d, i) {
    return getAngle(ang_inc*i).x * ((i==0)?0:100) + base.x;
  };

  var centerY = function (a, i) {
    return getAngle(ang_inc*i).y * ((i==0)?0:100) + base.y;
  };

现在你必须调整文字定位，......

Answer 2

如果你想要D3完成所有数学运算，你可以使用D3的力布局。当然，您必须为图形创建一个小型数据结构。以下是它的完成方式：

var graph = {
  nodes: [
    {"name": "1", "group": 1},
    {"name": "2", "group": 1}, 
    {"name": "3", "group": 1}, 
    {"name": "4", "group": 1}, 
    {"name": "5", "group": 1}
  ],
  links: [
    {"source": 0, "target": 0, "value": 1},
    {"source": 0, "target": 1, "value": 1}, 
    {"source": 0, "target": 2, "value": 1},
    {"source": 0, "target": 3, "value": 1},
    {"source": 0, "target": 4, "value": 1}
  ]
};

var width = 500,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .linkDistance(50)
    .charge(-1500)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function (d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("g");

node.append("circle")
    .attr("class", "node")
    .attr("r", 30)
    .style("fill", function (d) { return color(d.group); })
    .call(force.drag);

node.append("text")
    .text(function (d) { return d.name; })
    .attr("dx", -5).attr("dy", 5);


force.on("tick", function () {
    link
        .attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { return d.target.x; })
        .attr("y2", function (d) { return d.target.y; });

    node.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
});

Here is the fiddle向您展示它是如何运作的。

辐射辐射出一个圆圈

2 个答案: