无法渲染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” attrFunction的值无效
（匿名功能）
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返回dx和dy而不是d.x0和d.y0

对角线投影（[投影]）

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

function projection(d) { return [dx, dy]; }

我试图修改您的代码：

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