осуществите tooltip в радарной диаграмме с d3.js

var margin = {top: 30, right: 20, bottom: 30, left: 70},
h= 500;
w = 960;
ruleColor = "#CCC";
minVal = 0;
maxVal = 100;
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var viz = d3.select("#radar")
    .append('svg:svg')
    .attr('width', w)
    .attr('height', h)
    .attr('class', 'vizSvg');

viz.append("svg:rect")
    .attr('id', 'axis-separator')
    .attr('x', 0)
    .attr('y', 0)
    .attr('height', 0)
    .attr('width', 0)
    .attr('height', 0);

vizBody = viz.append("svg:g")
    .attr('id', 'body');

var heightCircleConstraint = 500 - margin.top - margin.bottom;
var widthCircleConstraint =  width = 960 - margin.left - margin.right,
circleConstraint = d3.min([heightCircleConstraint, widthCircleConstraint]);
var radius = d3.scale.linear().domain([minVal, maxVal]).range([0, (circleConstraint /2)]);
var radiusLength = radius(maxVal);
var centerXPos = widthCircleConstraint/2 + margin.left;
var centerYPos = heightCircleConstraint/2 + margin.top;

vizBody.attr("transform",
  "translate(" + centerXPos + ", " + centerYPos + ")");

d3.json("data/radar.json", function(error, data) {
    var hours = [];
    var series = [[]];
    data.QualitySummaryObject.forEach(function(d,i) {
        series[0][i] = d.extractPercentage;
        hours[i] = d.extractorName;
    });
    for (i = 0; i < series.length; i += 1) {
        series[i].push(series[i][0]);
    }
    //console.log(series.length);
    var radialTicks = radius.ticks(5);

    vizBody.selectAll('.circle-ticks').remove();
    vizBody.selectAll('.line-ticks').remove();
    var circleAxes = vizBody.selectAll('.circle-ticks')
      .data(radialTicks)
      .enter().append('svg:g')
      .attr("class", "circle-ticks");
    circleAxes.append("svg:circle")
      .attr("r", function (d, i) {
          return radius(d);
      })
      .attr("class", "circle")
      .style("stroke", ruleColor)
      .style("fill", "none");
    circleAxes.append("svg:text")
      .attr("text-anchor", "middle")
      .attr("dy", function (d) {
          return -1 * radius(d);
      })
      .text(String);

    var lineAxes = vizBody.selectAll('.line-ticks')
      .data(hours)
      .enter().append('svg:g')
      .attr("transform", function (d, i) {
          return "rotate(" + ((i/hours.length * 360) - 90) +
              ")translate(" + radius(maxVal) + ")";
      })
      .attr("class", "line-ticks");

    lineAxes.append('svg:line')
      .attr("x2", -1 * radius(maxVal))
      .style("stroke", ruleColor)
      .style("fill", "none");
    lineAxes.append('svg:text')
      .text(String)
      .attr("text-anchor", "middle")
      .attr("transform","translate(15) rotate(90)");

    //var highlightedDotSize = 4;
    var groups = vizBody.selectAll('.series').data(series);
    //console.log(hours.length);
    groups.enter().append("svg:g")
    .attr('class', 'series')
      .style('fill', "green")
      .style('stroke',"#ccc");    
    //groups.exit().remove();
    //console.log(Math.PI);
    var lines = groups.append('svg:path')
      .attr("class", "line")
      /*.attr("d", d3.svg.line.radial()
          .radius(function (d) {
              return 10;
          })
          .angle(function (d, i) {
              if (i == hours.length) {
                  i = 0;
              } //close the line
              return (i/hours.length) * 2 * Math.PI;
          }))*/
      .style("stroke-width", 1)
      .style("fill", "rgba(124,240,10,0.1)");
      /*groups.selectAll(".curr-point")
      .data(function (d) {
          return [d[0]];
      })
      .enter().append("svg:circle")
      .attr("class", "curr-point")
      .attr("r", 0);

  groups.selectAll(".clicked-point")
      .data(function (d) {
          return [d[0]];
      })
      .enter().append("svg:circle")
      .attr('r', 0)
      .attr("class", "clicked-point");*/

  lines.attr("d", d3.svg.line.radial()
      .radius(function (d) {

          return radius(d);
      })
      .angle(function (d, i) {
          if (i === hours.length) {
              i = 0;
          } //close the line
          return (i/hours.length) * 2 * Math.PI;
      }));

});

я осуществил этот код, чтобы составить радарную таблицу с json данными, вот json формат данных

{
"QualitySummaryObject": [
    {
        "extractPercentage": 68.81964,
        "extractorName": "Classification"
    },
    {
        "extractPercentage": 74.09091,
        "extractorName": "Keyword Match"
    },
    {
        "extractPercentage": 54.62963,
        "extractorName": "LocationBroadcast"
    },
    {
        "extractPercentage": 98.91892,
        "extractorName": "Qualification"
    },
    {
        "extractPercentage": 98.76923,
        "extractorName": "User Profile Location"
    },
    {
        "extractPercentage": 80.15909,
        "extractorName": "Valid Person Name"
    },

]
}

Теперь я хочу поместить tooltip на каждый пункт узла.. но я не в состоянии получить какую-либо идею, как сделать, то любое тело может помочь?

0
nl ja de
@LarsKotthoff эй, куда я помещаю это круги..., пожалуйста, ведут меня...
добавлено автор Saurabh Sinha, источник
@LarsKotthoff не прокладывание себе путь.. можно ли показать мне демонстрационный пример на основе этого кода...
добавлено автор Saurabh Sinha, источник
@LarsKotthoff ya, который прекрасен.. но в этом радаре чертят, я не в состоянии найти, как дать cx, и стоимость cy для всех кругов... помогают мне с этим
добавлено автор Saurabh Sinha, источник
@LarsKotthoff даже тогда не работа для меня... может вы показывать мне с примером кода.. что на самом деле вы пытаетесь сказать?
добавлено автор Saurabh Sinha, источник
Это могло бы помочь: stackoverflow.com/questions/10805184/…
добавлено автор Lars Kotthoff, источник
Идея состоит в том, чтобы приложить svg:title элемент к каждому элементу, для которого вы хотите показать tooltip. Это могло бы быть линиями в вашем случае?
добавлено автор Lars Kotthoff, источник
Посмотрите, например, это: bl.ocks.org/1339996
добавлено автор Lars Kotthoff, источник
Вы don' t должен добавить круги. Можно приложить элемент названия к любому элементу SVG (например, линии в диаграмме).
добавлено автор Lars Kotthoff, источник
После прилагают ("линия") и урегулирование признаков, которые вы сделали бы , прилагают ("название") .
добавлено автор Lars Kotthoff, источник

1 ответы

Here is an example of Twitter Bootstrap tooltips running on SVGs with D3 http://markhansen.co.nz/stolen-vehicles-pt2/

To get it working on newer versions see Why doesn't Twitter Bootstrap popover work with SVG elements? You'll need to use a 2.3.0+ version of bootstrap or the fix I posted in that thread.

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

D3.js — русскоговорящее сообщество
D3.js — русскоговорящее сообщество
57 участник(ов)

Чат для вопросов по d3.js