v3的D3 V4分层边缘捆绑端口 [英] D3 V4 Hierarchical Edge Bundling port from v3

问题描述

我正在努力将图形移植到V4.

I'm struggling to port a graph to V4.

这是我正在从事的工作: https://bl.ocks.org/mbostock/7607999

here is the one I'm working on: https://bl.ocks.org/mbostock/7607999

我尝试按照此处提供的说明进行操作: d3 v4分层边缘捆绑，但无济于事.

I've tried to follow the instructions provided here: d3 v4 Hierarchical Edge Bundling but to no avail.

我已经正确设置了标签的布局，但是边缘束的渲染不正确.

I've gotten the labels to layout correctly but the edge bundles render incorrectly.

这是我的财产:

var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.cluster()
    .size([360, innerRadius]);

const line = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveBundle.beta(0.95));

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

d3.json("readme-flare-imports.json", function(error, classes) {
    if (error) throw error;

    var wha = packageHierarchy(classes);

    var root = d3.hierarchy(wha, (d) => d.children);

    var links = packageImports(root.descendants());

    console.dir(links);

    cluster(root);

    var nodes = root.descendants();

    var edges = link.data(links);

    node = node
        .data(nodes.filter(function(n) { return !n.children; }))
        .enter().append("text")
        .attr("class", "node")
        .attr("dy", ".31em")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
        .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .text(function(d) { return d.data.key; })

    edges.enter().append('path')
        .attr('class', 'link')
        .merge(edges)
        .attr('d', d => {
            //console.log(d.source.path(d.target));
            return line(d.source.path(d.target)); });

    edges.exit().remove();

所有其他代码与示例中的代码基本相同(我必须在packageHierarchy和packageImports中的某些地方添加.data)

All other code is essentially the same as in the example (I had to add .data in a few places in packageHierarchy and packageImports)

这是我的结果.救命！

推荐答案

我知道了！

来自另一答案的这一行有些误导:

this line from another answer was slightly misleading:

const line = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveBundle.beta(0.95));

这应该是:

const line = d3.radialLine()
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; })
    .curve(d3.curveBundle.beta(0.95));

完整的解决方案可以在这里找到:

Full solution can be found here:

分层边缘捆绑v4端口

这篇关于v3的D3 V4分层边缘捆绑端口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！