如何创建偏轴？

Question

我正在尝试在下面创建类似这种地质视觉的东西，通过其组成（给定的三个分量）来绘制土壤图

据我所知，只有d3.axisBottom()，却没有d3.axis45Degrees()。因此，不幸的是，我实际上几乎没有进行这种视觉操作的尝试，因为我什至无法弄清楚如何为三角坐标平面设置轴。

问题

d3是否可以处理这样的轴配置，或者是否有其他与此类任务相关的d3方法？

Answer 1

这个问题是“太宽泛” 的边界。但是，我认为这是一个有趣的问题，因为文档可能使某些人相信只能使用垂直/水平轴。

您始终可以rotate轴（任何轴，axisBottom，axisTop，axisRight或axisLeft）并旋转{{1} }元素。

这是一个简单的演示（充满魔幻数字）：

<text>

const svg = d3.select("svg");
const scale = d3.scaleLinear([10, 380]);
const axis = d3.axisLeft(scale);
const axis2 = d3.axisRight(scale);
const axis3 = d3.axisBottom(scale);
const axisGroup = svg.append("g")
  .attr("transform", "rotate(30, 100, 400)")
  .call(axis)
  .selectAll("text")
  .attr("transform", "rotate(-30, -10, 0)");
const axisGroup2 = svg.append("g")
  .attr("transform", "rotate(-30, 108, -378)")
  .call(axis2)
  .selectAll("text")
  .attr("transform", "rotate(30, 10, 0)");
const axisGroup3 = svg.append("g")
  .attr("transform", "translate(14,333)")
  .call(axis3)

相应地更改那些魔术数字。顺便说一句，在您的问题中共享的那个三角形中，内角为<script src="https://d3js.org/d3.v5.min.js"></script> <svg width="450" height="400"></svg>度（不是60），所以这里我将轴旋转45度。

最后，值得一提的是，我只是对这些轴进行了变换（30，translate等）。对于真实绘图，就像图像中的绘图一样，您必须创建一个完整的数学运算，才能计算SVG中的 where ，这3个坐标的值将下降。