Исправить положение одного пузырька в макете упаковки d3 - PullRequest
Новая
       14

Исправить положение одного пузырька в макете упаковки d3

1 голос
/ 29 марта 2020

Я строю пузырьковую диаграмму, используя D3 js (v5), чтобы показать некоторые результаты исследования.
В основном у меня есть JSON с общим значением root и детьми как каждым результат.

Один из результатов должен быть выделен и расположен в центре верхней части круга. Мне удалось показать этот результат там, но другие пузыри перекрываются (возможно, потому что я изменил положение, предоставленное алгоритмом иерархии D3).

Можно ли программным образом зафиксировать положение только одного пузырька (в моем примере это синий пузырь) и изменить положение других пузырьков, чтобы они не перекрывали друг друга?

JFiddle 

const data = {
  name: 'Total',
  size: 1999999,
  children: [{
      name: 'Result A',
      size: 69936,
    },
    {
      name: 'Result b',
      size: 45000,
    },
    {
      name: 'Result C',
      size: 250000,
    },
    {
      name: 'Result D',
      size: 426791,
    },
    {
      name: 'Result E',
      size: 56000,
    },
    {
      name: 'Result F',
      size: 61050,
    },
    {
      name: 'Result G',
      size: 30000,
    },
  ],
};

// Fix this bubble at the top
const FIXED_BUBBLE_NAME = 'Result b';

const GREEN = '#90E0C2';
const BLUE = '#73A1FC';

const GRAPH_DIMENSIONS = {
  WIDTH: 234,
  HEIGHT: 234,
  PADDING: 10,
};

const buildDataTree = () => {
  const packLayout = d3
    .pack()
    .size([
      GRAPH_DIMENSIONS.WIDTH,
      GRAPH_DIMENSIONS.HEIGHT,
    ])
    .padding(GRAPH_DIMENSIONS.PADDING);

  const rootNode = d3
    .hierarchy(data)
    .sum((d) => d.size)
    .sort((a, b) => {
      return b.value - a.value;
    })

  return packLayout(rootNode);
};

const getSvgRoot = () => {
  return d3
    .select('#graph-container')
    .append('svg')
    .attr('id', 'graph-container-svg')
    .attr('width', GRAPH_DIMENSIONS.WIDTH + GRAPH_DIMENSIONS.PADDING)
    .attr('height', GRAPH_DIMENSIONS.HEIGHT + GRAPH_DIMENSIONS.PADDING)
    .style('overflow', 'visible');
};


const rootNodeDataTree = buildDataTree();

const svgRoot = getSvgRoot();

const node = svgRoot
  .selectAll('g')
  .data(
    d3
    .nest()
    .key((d) => d.id)
    .entries(rootNodeDataTree.descendants()),
  )
  .join('g')
  .selectAll('g')
  .data(d => d.values)
  .join('g');

node
  .append('circle')
  .attr('r', (d) => d.r)
  .attr('cx', (d) => {
    // if it is the selected bubble it must be at the center
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return GRAPH_DIMENSIONS.WIDTH / 2 + d.r / 2;
    }
    return d.x + GRAPH_DIMENSIONS.PADDING;
  })
  .attr('cy', (d) => {
    // if it is the selected bubble it must be at the center
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return d.r + GRAPH_DIMENSIONS.PADDING * 2;
    }
    return d.y + GRAPH_DIMENSIONS.PADDING;
  })
  .attr('cursor', 'pointer')
  .attr('stroke', (d) => (d.children ? GREEN : ''))
  .attr('stroke-width', (d) => (d.children ? 2 : 0))
  .attr('fill-opacity', (d) => (d.children ? 0.24 : 1))
  .attr('fill', (d) => {
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return BLUE;
    } else {
      return GREEN;
    }
  })
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="graph-container">

</div>

1 Ответ

3 голосов
/ 01 апреля 2020

Вот скрипка с моим предложением: https://jsfiddle.net/9r8kt1e0/1/

Код моделирования силы: 

const simulation = d3
  .forceSimulation(allNodes.filter( (d) => d.depth !== 0))
  .force("collide",d3.forceCollide(d => { return d.r;}))
  .force("charge", d3.forceManyBody().strength(0))
  .force("center", d3.forceCenter(GRAPH_DIMENSIONS.WIDTH/2+10, GRAPH_DIMENSIONS.HEIGHT/2))
  .force("bound", (alpha) => {
    for (let i = 0; i < allNodes.length; ++i) {
      n = allNodes[i];
      n.x = pythag(n.r, n.y, n.x);
      n.y = pythag(n.r, n.x, n.y);
    }
  })
  .stop();

for (var i = 0; i < 100; ++i) {
  simulation.tick();
}

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

Это решает перекрытие, вам придется немного поиграть с силами в соответствии с вашими потребностями.

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

Надеюсь, это поможет.

...