无法渲染 d3 径向树的链接

Question

我是 D3 的新手。

我正在尝试生成 D3 径向树。因此，每个节点都有属性 x0 和 y0 表示它在画布上的坐标。

我使用以下代码生成链接：

var diagonal = d3.svg.diagonal()
        .projection(function (d) {
            debugger;
            return [d.y0, d.x0];
        });

我以下列方式使用它：

var link = svg.selectAll(".link")
                .data(links)
                .enter().append("path")
                .attr("class", "link")
                .attr("d", diagonal);

但是，我收到以下错误类型：

错误： 属性 d="M0,0C, , -145.62305898749054,105.80134541264516" 的值无效 吸引函数
（匿名函数）
d3_selection_each d3_selectionPrototype.each
d3_selectionPrototype.attr
（匿名函数）
（匿名函数）
事件 回复

我所有的树节点都有 x0 和 y0 属性（没有一个节点未定义）。

谢谢！

Answer 1

几个问题：

1) svg.selectAll(".link") 应该是 d3.selectAll。也许你有 svg = d3.select("svg")

2) 根据https://github.com/mbostock/d3/wiki/SVG-Shapes#diagonal，您是否应该返回 d.x 和 d.y 而不是 d.x0 和 d.y0

diagonal.projection([投影])

如果指定了投影，则将投影设置为指定的 功能。如果未指定投影，则返回当前 投影。投影转换一个点（例如由 {x, y} 形式的源访问器和目标访问器）到二元素 数字数组。默认访问器假定输入点是 具有 x 和 y 属性的对象：

function projection(d) { return [d.x, d.y]; }

我试图修改你的代码：

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
        return [d.y, d.x];
    });

var link = d3.select("svg")//added
    .append("g")//added
    .selectAll("path")//modified
    .data(links)
    .enter().insert("path", "g")//modified
    .attr("class", "link")
    .attr("d", diagonal);

下面是一些可能有用的示例代码：

nestedData = d3.nest()
  .key(function (el) { return el.user })
  .entries(incData);

packableData = { id: "root", values: nestedData }

var depthScale = d3.scale.category10([0, 1, 2]);

var treeChart = d3.layout.tree();
treeChart.size([500, 500])
    .children(function (d) { return d.values });

var linkGenerator = d3.svg.diagonal();

d3.select("svg")
    .append("g")
    .attr("id", "treeG")
    .selectAll("g")
    .data(treeChart(packableData))
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")"
    });

//circle representing each node that we color with same scale used for circle pack
d3.selectAll("g.node")
    .append("circle")
    .attr("r", 10)
    .style("fill", function (d) { return depthScale(d.depth) })
    .style("stroke", "white")
    .style("stroke-width", "2px");

d3.selectAll("g.node")
    .append("text")
    .text(function (d) { return d.id || d.key || d.content })

d3.select("#treeG").selectAll("path")
    .data(treeChart.links(treeChart(packableData)))
    .enter().insert("path", "g")
    .attr("d", linkGenerator)
    .style("fill", "none")
    .style("stroke", "black")
    .style("stroke-width", "2px");