Question

查看整段代码

<!-- <!DOCTYPE html> -->
<meta charset="utf-8">
<head>
  <title>Force layout (foci)</title>
</head>

<style>
</style>

<body>
  <div id="content">
    <svg width="700" height="400">
      <g transform="translate(50, 200)"></g>
    </svg>
  </div>

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

  <script>
var width = 600, height = 400;

var colorScale = ['orange', 'lightblue', '#B19CD9'];
var xCenter = [100, 300, 500]

var numNodes = 100;
var nodes = d3.range(numNodes).map(function(d, i) {
  return {
    radius: Math.random() * 25,
    category: i % 3
  }
});

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(5))
  .force('x', d3.forceX().x(function(d) {
    return xCenter[d.category];
  }))
  .force('collision', d3.forceCollide().radius(function(d) {
    return d.radius;
  }))
  .on('tick', ticked);

function ticked() {
  var u = d3.select('svg g')
    .selectAll('circle')
    .data(nodes);

  u.enter()
    .append('circle')
    .attr('r', function(d) {
      return d.radius;
    })
    .style('fill', function(d) {
      return colorScale[d.category];
    })
    .merge(u)
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })

  u.exit().remove();
}
  </script>
</body>
</html>

我只是对ticked（）函数的属性部分感到困惑：

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

据我了解，返回行中的“ d”引用节点中的每个元素，因为这是要传递的数据。但是d.x和d.y是什么意思？那些返回节点中每个项目的第一和第二元素吗？如果是这样，那么它将返回半径和类别，因为它们是节点中仅有的两个元素，但这根本没有意义。

d.x和d.y返回什么？

谢谢！

如何在以下代码中解释“ d.x”？

0 个答案: