1

我需要将此冰柱旋转为垂直（上下）方式：https ://observablehq.com/@d3/zoomable-icicle 。第一个屏幕选项有效，但是当我单击该项目时，它失败了。以下更改有效：

.attr("transform", d => "translate(" + d.x0 + "," + d.y0 + ")");

.attr("width", d => d.x1 - d.x0 - 1)
.attr("height", d => rectHeight(d))

function rectHeight(d) {
    return d.y1 - d.y0 - Math.min(1, (d.y1 - d.y0) / 2);
}

我在旋转缩放或单击功能时遇到问题：

function clicked(p) { focus = focus === p ? p = p.parent : p;

root.each(d => d.target = {
  x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
  x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
  y0: d.y0 - p.y0,
  y1: d.y1 - p.y0
});

const t = cell.transition().duration(750)
     .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
 rect.transition(t).attr("height", d => rectHeight(d.target));
 text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
}

我试过反转x和y。我将功能更改为：

function clicked(p) { focus = focus === p ? p = p.parent : p;

root.each(d => d.target = {
  y1: (d.y0 - p.y0) / (p.y1 - p.y0) * width,
  y0: (d.y1 - p.y0) / (p.y1 - p.y0) * width,
  x1: d.x0 - p.x0,
  x0: d.x1 - p.x0
});

const t = cell.transition().duration(750)
     .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
 rect.transition(t).attr("height", d => rectHeight(d.target));
 text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
}

它仍然无法正常工作，我不知道还能做什么。

4

1 回答 1

0

这是 Observable notebook 的一个分支，它展示了如何做到这一点。

于 2021-09-16T00:21:58.560 回答