D3 Y轴上的Sunburst Breadcrumb

我是D3的新手，我试图修改Kryrodden的序列sunburst，并在Y（垂直）轴上显示面包屑。D3 Y轴上的Sunburst Breadcrumb

下面是我要做一个例子： enter image description here

下面是我在其中一个小提琴：http://jsfiddle.net/niceux/tth0goc7/

基本上，我已经尝试过寻找其中SVG组是是追加，并且与y轴的代码用小提琴代码的199行交换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; });

来源

2014-09-03 NiceUX

我试着修改现有的示例代码，其中breadcrumb得到初始化并交换出X轴代码和Y轴代码，但似乎无法找到任何可以翻转轴的地方即使是正确方向的暗示也会非常有帮助。谢谢！ – NiceUX 2014-09-03 20:10:55

这里与基本提琴，让你开始：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定位面包屑节点垂直于0固定x轴的情况和计算y轴位置代替，以及用于高度（b.h）这样切换面包屑多边形宽度（b.w）：

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

接着我需要修改<div id="sequence"></div> html元素以适应面包屑路径的新形状。将sequence div一起移除是最容易的，并根据id=leftsidebar创建一个新的div，基于右侧用于图例的现有<div id="sidebar">元素。我修改了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))

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

来源

2014-09-04 14:14:47

D3 Y轴上的Sunburst Breadcrumb

回答

相关问题