cant render links for d3 radial tree

Question

I'm a complete newbie to D3.

I'm trying to generate a D3 radial tree. So, each node has properties x0 and y0 which indicate its co-ordinates on the canvas.

I used the following code to generate the links :

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

I use it in the following manner :

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

However, I get the following error type :

Error: Invalid value for <path> attribute d="M0,0C, , -145.62305898749054,105.80134541264516" attrFunction
(anonymous function)
d3_selection_each d3_selectionPrototype.each
d3_selectionPrototype.attr
(anonymous function)
(anonymous function)
event respond

All my tree nodes have x0 and y0 properties (None of the nodes have them undefined).

Thanks!

Answer 1

Couple issues:

1) svg.selectAll(".link") should be d3.selectAll. Maybe you have svg = d3.select("svg") though

2) Should you be returning dx and dy instead of d.x0 and d.y0 according to https://github.com/mbostock/d3/wiki/SVG-Shapes#diagonal

diagonal.projection([projection])

If projection is specified, sets the projection to the specified function. If projection is not specified, returns the current projection. The projection converts a point (such as that returned by the source and target accessors) of the form {x, y} to a two-element array of numbers. The default accessor assumes that the input point is an object with x and y attributes:

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

I tried to modify your code:

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

Here is some sample code that may be helpful:

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