javascript - D3 Y 轴上的旭日面包屑

Question

我是 D3 的新手，正在尝试修改 Kerryrodden 的旭日序列，在 Y(垂直)轴上显示面包屑。

这是我想要的示例:

这是我所在位置的 fiddle :http://jsfiddle.net/niceux/tth0goc7/

基本上，我尝试找到 svg 组的附加位置，并在 fiddle 代码第 199 行上将 x 轴代码与 y 轴代码交换:

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

为了进一步改进，您可能需要重新调整面包屑多边形的形状(它们现在指向正确的位置，这看起来很奇怪