2

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

这是我要做什么的一个例子： 在此处输入图像描述

这是我所在位置的小提琴：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; });
4

1 回答 1

4

这是一个让您入门的基础知识：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 元素以适应面包屑路径的新形状。最简单的方法是一起删除sequencediv，然后根据右侧用于图例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-04T14:14:47.140 回答