D3.js: Tool tip Выпуск

Я очень новичок в D3.js. Я работал вокруг некоторых кругов и пытался найти подсказку для своих кругов. Когда я использую tooltip.html, я получаю undefined вместо значения. Кроме того, как разместить всплывающую подсказку прямо поверх моих кругов?D3.js: Tool tip Выпуск

var thedata= []; 

d3.tsv('data.tsv', function(data){ 
data.forEach(function(d){ 
    thedata.push(d.value); 
}) 

var margin = {top :30, right: 30, bottom: 40, left: 50} 

var height = 400, 
    width = document.getElementById('chart').clientWidth; 

colors = d3.scale.linear() 
.domain([0, thedata.length]) 
.range(['#6baed6','#31a354']) 

var tooltip = d3.select('body').append('div') 
     .style('position', 'absolute') 
     .style('padding', '0 7px') 
     .style('background', 'black') 
     .style('opacity', 0) 
     .style('border', '2px solid teal') 
     .style('border-radius', '2px') 

var xScale = d3.scale.ordinal() 
     .domain(d3.range(0, thedata.length)) 
     .rangePoints([0, width],1) 

var myChart = d3.select('#chart').append('svg') 
    .style('background','#E7E0CB') 
    .attr('width', width) 
    .attr('height', height) 
    .selectAll('circle').data(thedata) 
    .enter().append('g') 
     .attr('class', 'labe') 

    var cir = d3.selectAll('g.labe') 
    .append('circle') 
    .style('fill', function(d,i) { 
      return colors(i); 
    }) 
    .attr('cx',function(d,i){ 
     return xScale(i); 
    }) 
    .attr('cy', function(d, i){ 
      return (height/2); 
    }) 
    .attr('r', function(d){ 
     return 35*(d); 
    }) 
    .attr('fill', function(d,i){ 
     return colors(i); 
    }) 
    .on('mouseover', function(d) { 

    tooltip.transition() 
      .style('opacity', .85) 

    tooltip.html(function (d, i){ 
     return "<strong style = 'color:white'>Significance:</strong> <span style='color:red'>" + d + "</span>"; 
    }) 
      .style('left', (d3.event.pageX + 15) + 'px') 
      .style('top', (d3.event.pageY - 34*d) + 'px') 


    tempColor = this.style.fill; 
     d3.select(this) 
      .style('fill', '#595AB7') 
    }) 

    .on('mouseout', function(d) { 
     tooltip.transition() 
      .style('opacity', 0)   
      d3.select(this) 
      .style('opacity', 1) 
      .style('fill', tempColor) 
    }) 
    var text = d3.selectAll('g.labe') 
     .append('text') 
     .data(data) 
     .text(function(d , i){ 
      return d.domain; 
     }) 
     .attr('fill', palette.darkgray) 
     .attr('text-anchor', 'middle') 
     .attr("transform", function(d, i) { 
      // Set d.x and d.y here so that other elements can use it. d is 
      // expected to be an object here. 
      d.x =xScale(i), 
      d.y = (3*height/4+10); 
      return "translate(" + d.x + "," + d.y + ")"; 
      }); 
     var ease = d3.ease('elastic') 
});

Вот data.tsv:

value domain 
17142857 Increment 
2857143 Timber 
115310 Fruits

источник

2015-11-11 Anonymous

На вашем .html вызова вам не нужны дополнительные function(d,i) обертку:

tooltip.html("<strong style = 'color:white'>Significance:</strong> <span style='color:red'>" + d.value + "</span>")

Обратите внимание, что я также использую d.value поскольку d в этом контексте является объектом.

Для вашей проблемы с размещением вы делаете математику на d (опять же это объект). Не уверен, что вы после там, но это:

 .style('left', (d3.event.pageX + 'px')) 
     .style('top', (d3.event.pageY - 34) + 'px')

редактирует

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

.style('left', xScale(i) + "px") 
.style('top', (height/2) - (0.035 * (+d.value)) + 'px') // circle placement - radius

Рабочий код:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var thedata = [{ 
 
     "value": "1714", 
 
     "domain": "Increment" 
 
    }, { 
 
     "value": "2857", 
 
     "domain": "Timber" 
 
    }, { 
 
     "value": "1153", 
 
     "domain": "Fruits" 
 
    }]; 
 

 
    var margin = { 
 
     top: 30, 
 
     right: 30, 
 
     bottom: 40, 
 
     left: 50 
 
    } 
 

 
    var height = 400, 
 
     width = 500; 
 

 
    colors = d3.scale.linear() 
 
     .domain([0, thedata.length]) 
 
     .range(['#6baed6', '#31a354']) 
 

 
    var tooltip = d3.select('body').append('div') 
 
     .style('position', 'absolute') 
 
     .style('padding', '0 7px') 
 
     .style('background', 'black') 
 
     .style('opacity', 0) 
 
     .style('border', '2px solid teal') 
 
     .style('border-radius', '2px') 
 

 
    var xScale = d3.scale.ordinal() 
 
     .domain(d3.range(0, thedata.length)) 
 
     .rangePoints([0, width], 1) 
 

 
    var myChart = d3.select('body').append('svg') 
 
     .style('background', '#E7E0CB') 
 
     .attr('width', width) 
 
     .attr('height', height) 
 
     .selectAll('circle').data(thedata) 
 
     .enter().append('g') 
 
     .attr('class', 'labe') 
 

 
    var cir = d3.selectAll('g.labe') 
 
     .append('circle') 
 
     .style('fill', function(d, i) { 
 
     return colors(i); 
 
     }) 
 
     .attr('cx', function(d, i) { 
 
     return xScale(i); 
 
     }) 
 
     .attr('cy', function(d, i) { 
 
     return (height/2); 
 
     }) 
 
     .attr('r', function(d) { 
 
     console.log(d.value); 
 
     return 0.035*(+d.value); 
 
     }) 
 
     .attr('fill', function(d, i) { 
 
     return colors(i); 
 
     }) 
 
     .on('mouseover', function(d, i) { 
 

 
     tooltip.transition() 
 
      .style('opacity', .85) 
 

 
     tooltip.html("<strong style = 'color:white'>Significance:</strong> <span style='color:red'>" + d.value + "</span>") 
 
      .style('left', xScale(i) + "px") 
 
      .style('top', (height/2) - (0.035 * (+d.value)) + 'px') 
 

 

 
     tempColor = this.style.fill; 
 
     d3.select(this) 
 
      .style('fill', '#595AB7') 
 
     }) 
 

 
    .on('mouseout', function(d) { 
 
     tooltip.transition() 
 
     .style('opacity', 0) 
 
     d3.select(this) 
 
     .style('opacity', 1) 
 
     .style('fill', tempColor) 
 
    }) 
 
    var text = d3.selectAll('g.labe') 
 
     .append('text') 
 
     .data(thedata) 
 
     .text(function(d, i) { 
 
     return d.domain; 
 
     }) 
 
     //.attr('fill', palette.darkgray) 
 
     .attr('text-anchor', 'middle') 
 
     .attr("transform", function(d, i) { 
 
     // Set d.x and d.y here so that other elements can use it. d is 
 
     // expected to be an object here. 
 
     d.x = xScale(i), 
 
      d.y = (3 * height/4 + 10); 
 
     return "translate(" + d.x + "," + d.y + ")"; 
 
     }); 
 
    var ease = d3.ease('elastic') 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-11-11 17:36:45 Mark

Спасибо, связка! :) Но проблема размещения относится. Радиусы окружностей должны быть пропорциональны «d.value». В моем опубликованном коде радиус круга должен был быть: .attr ('r', function (d) { return (0.035) * d; }) '. Простите за это. Теперь, как я могу разместить подсказку всегда наверху независимо от диаметра круга? –

@MagicManSuperMan, см. Правки для ответа на комментарии. – Mark

Он работает! Еще раз спасибо, Марк. –

D3.js: Tool tip Выпуск

ответ

Смежные вопросы