Расположите круги по горизонтальной оси без наложения, используя макет силы - PullRequest
Новая
       22

Расположите круги по горизонтальной оси без наложения, используя макет силы

0 голосов
/ 02 ноября 2018

Я хотел бы расположить круги по шкале d3 и ослабить их таким образом, чтобы они не перекрывались. Я знаю, что это снижает точность, но это нормально для типа диаграммы, которую я хотел бы сгенерировать.

Это мой минимальный (не) рабочий пример: https://jsfiddle.net/wmxh0gpb/1/

<body>
  <div id="content">
    <svg width="700" height="200">
      <g transform="translate(50, 100)"></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 xScale = d3.scaleLinear().domain([0, 1]).range([0, 300]);

var numNodes = 5;
var nodes = d3.range(numNodes).map(function(d, i) {
  return {
    value: Math.random()
  }
});

var simulation = d3.forceSimulation(nodes)
  .force('x', d3.forceX().strength(0.5).x(function(d) {
    return xScale(d.value);
  }))
  .force('collision', d3.forceCollide().strength(1).radius(50))
  .on('tick', ticked);

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

  u.enter()
    .append('circle')
    .attr('r', function(d) {
      return 25;
    })
    .style('fill', function(d) {
      return "black";
    })
    .merge(u)
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return 0
    })
    .attr("opacity", 0.5)

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

Круги расположены с использованием силы forceX, и столкновение должно быть предотвращено с помощью forceCollide. Однако круги, кажется, находят устойчивую позицию независимо от перекрытия, а не избегают его.

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Техническое имя для этого: диаграмма пчелосмеси : только одна ось содержит значимую информацию, другая используется только для разделения узлов.

Для создания диаграммы теплоты пчел в D3 вы должны также передать позицию y силе (как d3.forceY), в данном случае с 0 (так как вы уже переводите группу), как : 

var simulation = d3.forceSimulation(nodes)
    .force('x', d3.forceX(function(d) {
        return xScale(d.value);
    }).strength(0.8))
    .force('y', d3.forceY(0).strength(0.2))

Как видите, forceX и forceY имеют разные значения strength. Вы должны играть с ними, пока не найдете подходящую вам комбинацию: в конце концов, диаграмма пчелиного тепла - это компромисс между точностью и избежанием перекрытия узлов.

Не относится к вопросу, но очень важно: удалить все из функции ticked, которая не связана с перемещением узлов. Функция ticked будет выполняться десятки раз в секунду, обычно 300 раз, прежде чем симуляция остынет. Нет смысла обновлять, входить и выходить из выборок 300 раз!

Вот ваш код с этими изменениями: 

<body>
  <div id="content">
    <svg width="700" height="200">
      <g transform="translate(50, 100)"></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 xScale = d3.scaleLinear().domain([0, 1]).range([0, 300]);

    var numNodes = 5;
    var nodes = d3.range(numNodes).map(function(d, i) {
      return {
        value: Math.random()
      }
    });

    var simulation = d3.forceSimulation(nodes)
      .force('x', d3.forceX(function(d) {
        return xScale(d.value);
      }).strength(0.8))
      .force('y', d3.forceY(0).strength(0.2))
      .force('collision', d3.forceCollide().strength(1).radius(25))
      .on('tick', ticked);

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

    u = u.enter()
      .append('circle')
      .attr('r', function(d) {
        return 25;
      })
      .style('fill', function(d) {
        return "black";
      })
      .merge(u)
      .attr("opacity", 0.5)

    u.exit().remove();

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

  </script>
</body>
0 голосов
/ 02 ноября 2018

Поскольку вы игнорируете координату y симуляции силы

Добавьте это как последнюю строку функции tick. Теперь вы заставляете узлы быть в точке y == 0 

nodes.forEach(e => { e.fy = 0 });

И установить радиус силы столкновения равным реальному радиусу (25) 

.force('collision', d3.forceCollide().strength(1).radius(25))
...