Question

我正在努力将图表移植到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）

以下是我的结果。救命啊！

Answer 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

D3 V4 H3的分层边缘捆绑端口

1 个答案: