Добавьте метки к диаграмме аккордов D3

Я начинающий программист, так что этот, вероятно, будет простым для большинства из вас. Какие строки кода мне нужны для надписей и / или текста при наведении курсора на эту диаграмму аккордов?

http://mbostock.github.com/d3/ex/chord.html

Мне нужно, чтобы отобразить название категории во внешней полосе. Когда вы наводите курсор мыши, я хочу отобразить точное число и обе категории. Примерно так: "A: 5 вещь из B".

РЕДАКТИРОВАТЬ:

Я до сих пор не могу понять, как реализовать это в моем коде. Может кто-нибудь заполнить мой пример кода объяснить, что происходит?

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Selecties EK 2010</title>
    <script type="text/javascript" src="d3.v2.js"></script>
    <link type="text/css" rel="stylesheet" href="ek2010.css"/>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="ek2010.js"></script>
  </body>
</html>

а также

// From http://mkweb.bcgsc.ca/circos/guide/tables/
var chord = d3.layout.chord()
    .padding(.05)
    .sortSubgroups(d3.descending)
    .matrix([
      [0, 0, 7, 5],
      [0, 0, 8, 3],
      [7, 8, 0, 0],
      [5, 3, 0, 0]
    ]);

var width = 1000,
    height = 1000,
    innerRadius = Math.min(width, height) * .3,
    outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal()
    .domain(d3.range(4))
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

var svg = d3.select("#chart")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("g")
  .selectAll("path")
    .data(chord.groups)
  .enter().append("path")
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke", function(d) { return fill(d.index); })
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));

var ticks = svg.append("g")
  .selectAll("g")
    .data(chord.groups)
  .enter().append("g")
  .selectAll("g")
    .data(groupTicks)
  .enter().append("g")
    .attr("transform", function(d) {
      return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
          + "translate(" + outerRadius + ",0)";
    });

ticks.append("line")
    .attr("x1", 1)
    .attr("y1", 0)
    .attr("x2", 5)
    .attr("y2", 0)
    .style("stroke", "#000");

ticks.append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) {
      return d.angle > Math.PI ? "end" : null;
    })
    .attr("transform", function(d) {
      return d.angle > Math.PI ? "rotate(180)translate(-16)" : null;
    })
    .text(function(d) { return d.label; });

svg.append("g")
    .attr("class", "chord")
  .selectAll("path")
    .data(chord.chords)
  .enter().append("path")
    .style("fill", function(d) { return fill(d.target.index); })
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("opacity", 1);

/** Returns an array of tick angles and labels, given a group. */
function groupTicks(d) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, 1).map(function(v, i) {
    return {
      angle: v * k + d.startAngle,
      label: i % 5 ? null : v / 1 + " internat."
    };
  });
}

/** Returns an event handler for fading a given chord group. */
function fade(opacity) {
  return function(g, i) {
    svg.selectAll("g.chord path")
        .filter(function(d) {
          return d.source.index != i && d.target.index != i;
        })
      .transition()
        .style("opacity", opacity);
  };
}
Источник

2 ответа

Решение

Добавьте текстовые элементы для отображения меток. В качестве альтернативы, используйте элементы textPath, если вы хотите отображать текст вдоль пути. Два примера маркированных аккордовых диаграмм:

Источник

Вы должны посмотреть на обработчик событий ( selection.on ()) в вики d3.js на Github. Это показывает вам, как добавлять события к элементам, включая mouseover и mouseout. Если вы посмотрите на тот пример, на который вы ссылались, вы уже можете увидеть его пример:

svg.append("g")
  .selectAll("path")
    .data(chord.groups)
.enter().append("path")
  .style("fill", function(d) { return fill(d.index); })
  .style("stroke", function(d) { return fill(d.index); })
  .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
  .on("mouseover", fade(.1))
  .on("mouseout", fade(1));

Если навести курсор мыши на группы аккордов во внешнем кольце, вы увидите, что все остальные группы аккордов исчезнут.

Если вы хотите, чтобы появлялись метки, содержащие строки (текст), вам нужно определить их, используя другую библиотеку JS. Я знаю, что это работает Tipsy, и здесь есть пример, использующий его вместе с d3. Затем вы сможете просто использовать селектор, чтобы выбрать, какой элемент SVG вы хотите проиллюстрировать это поведение.

Надеюсь, это поможет.

Источник
Другие вопросы по тегам