来自 v3 的 D3 V4 分层边缘捆绑端口答案

【问题标题】：D3 V4 Hierarchical Edge Bundling port from v3来自 v3 的 D3 V4 分层边缘捆绑端口
【发布时间】：2017-03-14 22:41:33
【问题描述】：

我正在努力将图表移植到 V4。

这是我正在处理的一个：https://bl.ocks.org/mbostock/7607999

我已尝试按照此处提供的说明进行操作：d3 v4 Hierarchical Edge Bundling 但无济于事。

我的标签布局正确，但边缘束渲染不正确。

这是我所拥有的：

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）

这是我的结果。救命！

【问题讨论】：

标签： d3.js

【解决方案1】：

我想通了！

另一个答案的这一行有点误导：

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));

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

Hierarchical Edge Bundling v4 port

【讨论】：