無法渲染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");