Y 轴上的 D3 旭日形面包屑答案

【问题标题】：D3 Sunburst Breadcrumb on Y AxisY 轴上的 D3 旭日形面包屑
【发布时间】：2014-10-28 09:26:44
【问题描述】：

我是 D3 的新手，我正在尝试修改 Kerryrodden 的序列 sunburst，在 Y（垂直）轴上显示面包屑。

这是我要实现的示例：

这是我所在位置的小提琴：http://jsfiddle.net/niceux/tth0goc7/

基本上，我已经尝试找到附加 svg 组的位置，并在小提琴代码的第 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; });

【问题讨论】：

我尝试修改现有示例代码，其中面包屑被初始化并换出 X 轴代码和 Y 轴代码，但似乎找不到任何可以翻转轴的地方。即使是正确方向的提示也会非常有帮助。谢谢！

标签： javascript svg d3.js sunburst-diagram

【解决方案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，并根据右侧用于图例的现有<div id="sidebar"> 元素创建一个带有id=leftsidebar 的新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))

为了进一步改进，您可能需要重新塑造面包屑多边形（它们现在指向右侧，看起来很奇怪

【讨论】：