Где d3.svg.diagonal()?

Ответ 1

Обновление: принятый ответ устарел с момента выпуска D3 v4.9.

В D3 версии 4.9.0 введены формы ссылок, которые имеют ту же функциональность, что и старая d3.svg.diagonal в D3 v3.

Согласно API:

Форма ссылки генерирует гладкую кубическую кривую Безье от исходной точки до целевой точки. Тангенс кривой в начале и в конце является вертикальным, горизонтальным или радиальным.

Есть три метода:

• d3.linkHorizontal()
• d3.linkVertical()
• d3.linkRadial()

Итак, для складного дерева, подобного тому, которое вы связали, вы определяете атрибут пути d как:

.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

Демо:

Предположим, у вас есть объект с source и target, каждый со свойствами x и y:

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

Сначала вы создаете генератор ссылок:

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

И тогда вы можете нарисовать путь, просто передав эти данные в генератор ссылок:

.attr("d", link(data))

Вот демо:

var svg = d3.select("svg");

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

svg.append("path")
  .attr("d", link(data))
  .style("fill", "none")
  .style("stroke", "darkslateblue")
  .style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Ответ 2

См. вопрос GitHub здесь.

Пока проблема все еще открыта, похоже, что г-н Босток не спешит повторно внедрять ее в версии 4. Почему? Потому что это тривиально, чтобы реализовать себя:

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}

Ответ 3

Мне было очень тяжело с этим, а потом, через пару часов, я понял, насколько это легко (как и все остальные, кто упоминает об этом). Заменить:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

...с этим:

var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};

Это должно быть единственным изменением. Надеюсь, это поможет кому-нибудь еще. Это должно работать с такой визуализацией, как Patrick Brockman Collapsible/Searchable Tree.