Question

我正在尝试将一个向下三角形与一个矩形对齐，以创建一个可用于表示里程碑的组。任何想法为什么这个代码只显示2个三角形以及如何将它们移动到矩形的中心底部或任何其他方法来实现相同的目标？

 tri.enter().append("path")
       .attr("d", d3.svg.symbol().type("triangle-down"))
       .style("fill", "black")
       .attr("transform", function (d) { return "translate(" + xRange(d.start) + "," + yRange(d.Duration) + ")"; });

Answer 1

正如评论中所指出的，您只看到两个矩形的原因是某些数据绑定到现有路径。要修复，请为您可以选择的符号指定一个特殊类：

var tri = vis.selectAll("path.tri").data(datar);

对于符号的定位，您需要使用与矩形相同的值。 y位置需要通过常量偏移，以便符号出现在底部，x位置显示持续时间的一半 - 我猜这是你真正想要显示的内容，因为你正在将所有内容硬编码到长度50。

.attr("transform", function (d) { return "translate(" + (xRange(d.start) + 25) + "," + (yRange(d.start) + 15) + ")"; });

完整演示here。

如何制作d3里程碑形状

1 个答案: