@BKaiyrbekov

Как сделать так, чтобы path зависел от размера текста в d3js v5?

Добрый день, коллеги, я использую d3js версии 5 и столкнулся с такой проблемой что текста над друг другом, не могли бы вы мне помочь? (я первый раз изпользую этот d3js и чуток не понимаю:D ) не могли бы вы мне помочь, как сделать путь зависимым от длины текста?

если визуально то проблема так выглядить 5f61d33eb056a088611351.jpeg

структура кода, я из другого файла данные setup(Node, treedata)
const treedata = {
    "name": "Top Level",
    "parent": "null",
    "children": [
        {
            "name": "Level 2: A",
            "parent": "Top Level",
            "children": [
                {
                    "name": "Son of A 232432432",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A 2222",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A 111111",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A",
                    "parent": "Level 2: A"
                },
                {
                    "name": "Daughter of A",
                    "parent": "Level 2: A"
                }
            ]
        },
        {
            "name": "Level 2: B",
            "parent": "Top Level"
        }
    ]
}
function setup(container, treedata) {
    const style = {
        width: window.innerWidth / 2,
        height: window.innerHeight / 2,
        x0: Infinity,
        x1: -Infinity,
        margin: {
            top: 50,
            bottom: 50,
            left: 50,
            right: 50,
        }
    };

    const tree = d3Tree()
        .size([style.width, style.height])
        .separation(function (a, b) {
            return (a.parent == b.parent ? 1 : 2) / a.depth;
        });

    const root = tree(d3Hierarchy(treedata));
    root.each(d => {
        d.y = d.depth * 180;
        if (d.x > style.x1) style.x1 = d.x;
        if (d.x < style.x0) style.x0 = d.x;
    });

    const zoom = d3Zoom()
        .scaleExtent([1, 40])
        .on("zoom", zoomed);

    const svg = d3Select(container).select("svg").call(zoom);
    const g = svg.append("g")
        .attr("font-size", 14)
        .attr("transform",
            "translate(" + 0 + "," + style.margin.top + ")");

    const link = g.append("g")
        .attr("class", "lines")
        .attr("fill", "none")
        .attr("stroke", "#555")
        .attr("stroke-opacity", 0.4)
        .attr("stroke-width", 1.5)
        .selectAll("path")
        .data(root.links())
        .join("path")
        .attr("d", linkVertical);

    const node = g.append("g")
        .attr("class", "line-text")
        .attr("stroke-linejoin", "round")
        .attr("stroke-width", 3)
        .selectAll("g")
        .data(root.descendants())
        .enter().append("g")
        .attr("class", d => "node" + (d.children ? " node-parent" : " node-child"))
        .join("g")
        .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

    node.append("circle")
        .attr("fill", d => d.children ? "#555" : "#999")
        .attr("r", 4);

    node.append("text")
        .attr("dy", "0.31em")
        .attr("x", d => d.children ? -6 : 6)
        .attr("text-anchor", d => d.children ? "end" : "start")
        .text(d => d.data.name)

    function zoomed({ transform }) {
        g.attr("transform", transform);
    }
    function linkVertical(d) {
        return `M${d.source.x},${d.source.y}C${(d.source.x + d.target.x) / 2},${d.target.y} ${(d.source.x + d.target.x) / 2},${d.source.y} ${d.target.x},${d.target.y}`;
    }
}


хотелось бы чтобы вот так было 5f61d2af6c485585771281.jpeg
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы