Как получить кластер узлов в указанное c местоположение? - PullRequest
0 голосов
/ 14 июля 2020

в настоящее время используется d3. js для создания диаграммы Венна, которая соответствует этому примеру

https://bl.ocks.org/emeeks/6a77dbcf149b4b9e772b30af71d11b06

Я пытаюсь объединить узлы в кластер в области, отмеченные X, в зависимости от их атрибутов:

Пример

В исходном примере я заметил, что они используют центральный атрибут в силовой компоновке для направления узлов. Я попытался добавить позиции y, чтобы заставить Y, но получаю непоследовательные результаты.

Моя сила:

var simulation = d3.forceSimulation()
       .force("collision", d3.forceCollide(6).iterations(1))
       //@ts-ignore
       .force("x", d3.forceX(a => a.center).strength(0.1))
       .force("y", d3.forceY(a => a.yPos).strength(0.1))
       .force("center", d3.forceCenter(width / 2, height / 2))
       .alphaDecay(0.001)
       .alpha(0.25)
       //@ts-ignore
        .nodes(nodes)
        .on("tick", ticked)
        .stop()

       simulation.tick()

функция галочки

function ticked() {
        node
            //@ts-ignore
            .attr("cx", d => d.x)
            //@ts-ignore
            .attr("cy", d => d.y);
        //@ts-ignore
        makeAnnotations.annotations()
        //@ts-ignore
        .forEach((d, i) => {
            d.x = generateVennPosX(d)
            d.y = generateVennPosY(d)
            let points = nodes
              .filter(d => d[groups[i]])
              //@ts-ignore
              .map(d => ({ x: d.x, y: d.y, r: 5}))
              console.log("points", points)
              //@ts-ignore
            circle = d3.packEnclose(points)

            //@ts-ignore
            // d.position = {x: circle.x, y: circle.y}
            //@ts-ignore
            d.subject.radius = generateRadiusVenn(d)

          })

        makeAnnotations.update()
      }

Я использую аннотации для создания круги.

...