diagonal.projection（[投影]）

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

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

错误：＆lt; path＆gt;的值无效属性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

返回d.x和d.y而不是d.x0和d.y0

diagonal.projection（[投影]）

如果指定了投影，则将投影设置为指定的投影   功能。如果未指定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");

无法渲染d3径向树的链接

1 个答案:

diagonal.projection（[投影]）