D3 v4 力模拟“分组”

Question

我是一个 d3 菜鸟，一直在尝试让力模拟工作。我认为我想要实现的目标可能被称为其他东西，但.. 简而言之，我有一些用户数据详细说明了用户注册的月份，我希望能够对所有注册的用户进行分组/链接同月在一起。这是数据和JSFiddle

var nodes = [
    {"id": "Aug", "name": "Paul" },
    {"id": "Aug", "name": "Ian" },
    {"id": "Aug", "name": "Andy" },
    {"id": "Sep", "name": "Gabby" },
    {"id": "Sep", "name": "Vicky" },
    {"id": "Oct", "name": "Dylan" },
    {"id": "Oct", "name": "Finley" },
    {"id": "Oct", "name": "Rudi" }
  ]
  var links = [
    {"source": "Aug", "target": "Aug" },
    {"source": "Aug", "target": "Aug" },
    {"source": "Aug", "target": "Aug" },
    {"source": "Sep", "target": "Sep" },
    {"source": "Sep", "target": "Sep" },
    {"source": "Oct", "target": "Oct" },
    {"source": "Oct", "target": "Oct" }
  ]

是否可以进行这种类型的“分组/链接”？还是力模拟是错误的类型？

我通过看不到数据的排列方式找到了这个：http://bl.ocks.org/mbostock/1021841

Answer 1

我对此进行了尝试，并设法调整了 mbostock 的 original example，以便支持更多用例（即多于/少于 4 个类别的情况）。

无需定义链接，只需为每个节点添加一个category 字段即可，如getNodes 函数中所见。

const DATA_SIZE = 100;
var categories = 2; // how many categories

var width = 500,
  height = 500;

var fill = d3.scale.category10();

var force = null;

var input = d3.select("input").attr('value', categories).on('input', handleInputChange);


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

render();

function getNodes() {
  return d3.range(100).map(i => ({
    category: i % categories + 1
  }))
}

function handleInputChange() {
  categories = Number(this.value);
  render();
}


function getTargets() {
  if (categories === 1) {
    return [{
      x: width / 2,
      y: height / 2
    }]
  }

  const radius = Math.min(width, height) / 2;

  const pie = d3.layout.pie()
    .value(() => 1)(d3.range(categories));

  const arcs = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40)

  return d3.range(categories).map(i => {
    const [x, y] = arcs.centroid(pie[i]);
    return {
      x: x + width / 2,
      y: y + height / 2,
    }
  })
}


function render() {

  var nodes = getNodes();
  var targets = getTargets();
  if (force) {
    force.stop();
  }

  force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .on("tick", tick)
    .start();

  var node = svg.selectAll(".node")
    .data(nodes)

  node.enter().append("circle")
    .attr("class", "node")

  node.attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })
    .attr("r", 8)
    .style("fill", function(d, i) {
      return fill(d.category);
    })
    .style("stroke", function(d, i) {
      return d3.rgb(fill(d.category)).darker(2);
    })
    .call(force.drag)
    .on("mousedown", function() {
      d3.event.stopPropagation();
    });

  d3.select("svg")
    .on("mousedown", mousedown);


  function tick(e) {
    // Push different nodes in different directions for clustering.
    
    var k = e.alpha / 8; // how strong to apply this force
    
    nodes.forEach(function(o, i) {
      o.y += (targets[o.category - 1].y - o.y) * k;
      o.x += (targets[o.category - 1].x - o.x) * k;
    });

    node.attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
  }

  function mousedown() {
    nodes.forEach(function(o, i) {
      o.x += (Math.random() - .5) * 40;
      o.y += (Math.random() - .5) * 40;
    });
    force.resume();
  }
}

.controls {
  margin-bottom: 10px;
}

.controls input {
  font-size: 30px;
  text-align: center;
}

.controls span {
  font-family: sans-serif;
  font-size: 30px;
  color: gray;
  margin: 0 5px;
}

svg {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="controls">
  <span>Categories</span> <input type="number" min="1" max="15" />
</div>