Вопрос по javascript – Как поставить метки по краям в примере с дендрограммой?

10

Учитывая диаграмму дерева какДендрограмма пример (источник) как бы наклеить ярлыки по краям? Код Javascript для рисования краев выглядит следующим образом:

var link = vis.selectAll("path.link")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

Ваш Ответ

1   ответ
13

автор D3, очень любезно помог со следующим решением. Определите стиль для g.link; Я просто скопировал стиль для g.node. Затем я заменил & quot; var link = .... & quot; код со следующим. Функции x и y помещают метку в центр пути.

var linkg = vis.selectAll("g.link")
    .data(cluster.links(nodes))
    .enter().append("g")
    .attr("class", "link");

linkg.append("path")
    .attr("class", "link")
    .attr("d", diagonal);

linkg.append("text")
    .attr("x", function(d) { return (d.source.y + d.target.y) / 2; })
    .attr("y", function(d) { return (d.source.x + d.target.x) / 2; })
    .attr("text-anchor", "middle")
    .text(function(d) {
        return "edgeLabel";
    });

В идеале текстовая функция должна предоставлять метку специально для каждого края. Я заполнил объект именами моих ребер при подготовке моих данных, поэтому моя текстовая функция выглядит так:

    .text(function(d) {
        var key = d.source.name + ":" + d.target.name;
        return edgeNames[key];
    });
Несколько человек испытывали желание поменять местами x и y во второй и третьей строкахlinkg.append("text") кусок. Пожалуйста, не делайте, они верны, как они есть. Существует обновление, потому чтоDendrogram example на сайте D3 изменился. Первая строка должна теперь читать:var linkg = svg.selectAll(".link") Will Ware

Похожие вопросы