Y轴上的D3 Sunburst面包屑

Question

我是D3的新手，我正试图通过在Y（垂直）轴上显示面包屑来修改Kerryrodden的序列旭日形态。

以下是我想要的一个例子：

以下是我在http://jsfiddle.net/niceux/tth0goc7/

的小提琴

基本上，我已经尝试找到附加svg组的位置，并在小提琴代码的第199行上使用y轴代码交换x轴代码：

entering.append("svg:text")
      .attr("x", b.w / 2)
      .attr("y", (b.h + b.t) / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; }); 

Answer 1

以下是帮助您入门的基础知识：http://jsfiddle.net/henbox/8m2gn7vw/2/

我做了一些改变。首先，这是确定每个面包屑多边形如何定位的代码部分：

// Set position for entering and updating nodes.
g.attr("transform", function(d, i) {
    return "translate(" + i * (b.w + b.s) + ", 0)";
});

将translate垂直切换到面包屑节点是将 x轴固定为0并计算 y轴位置的情况，如以及像这样切换高度（b.w）的面包屑多边形宽度（b.h）：

return "translate(0, " + i * (b.h + b.s) + ")";

接下来我需要修改<div id="sequence"></div> html元素以适应面包屑路径的新形状。最简单的方法是将sequence div一起删除，并根据图例右侧使用的现有id=leftsidebar元素创建一个<div id="sidebar">的新div。我修改了CSS以给出新div的大小和位置。

最后，我将percentageString移动到最后一个痕迹导致节点下方的正确位置。为此，我转而使用x和y属性：

d3.select("#trail").select("#endlabel")
    .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
    .attr("y", b.h / 2)

到

d3.select("#trail").select("#endlabel")
    .attr("x", b.w / 2)
    .attr("y", (nodeArray.length + 0.5) * (b.h + b.s))

为了进一步改进，你可能想要重新塑造面包屑多边形（它们指向看起来很奇怪的那一刻