Как создать скошенные оси?

Question

Я пытаюсь создать что-то похожее на это геологическое изображение ниже, которое отображает почву по ее составу (из заданных трех компонентов):

Кмои знания там только d3.axisBottom(), но ничего подобного d3.axis45Degrees().Так что, к сожалению, мои попытки на этом визуале были прерваны практически сразу, потому что я даже не могу понять, как настроить оси для треугольной координатной плоскости.

Вопрос

Может d3обрабатывать такую ​​конфигурацию оси, или есть какие-либо другие методы d3, которые были бы уместны для такой задачи, как эта?

Answer 1

Этот вопрос является пограничным "слишком широкий" . Однако я считаю, что это интересный вопрос, поскольку документация может заставить кого-то поверить, что возможны только вертикальные / горизонтальные оси.

Вы всегда можете rotate ось (любая ось, будь то axisBottom, axisTop, axisRight или axisLeft) и повернуть элементы <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, rotate и т. Д ...) этих осей. Для реального графика, подобного изображенному на вашем изображении, вам нужно создать целую математику, чтобы вычислить , где в SVG, значения 3 координат упадут.