в настоящее время используется 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()
}
Я использую аннотации для создания круги.