顯示信息爲提示

Question

我有一個圖表這裏： - code link

讓我告訴你，我想實現here.There是從折線一年中的月份 - 一月，二月，三月，。 ...現在，當我徘徊在幾個月的時間裏，我想在一月，第五週，第六週，...，第八週顯示week1，week2，....，week4 for 2月等等。也就是說，每個星期四月我將使用PHP來回顯每週數據的價值 - 周1：23，周2：45，周3：56，周4：75等.....

友情提醒。

我試過使用.csv文件將所有的52周信息，但沒有運氣。 JavaScript的參與：

'use strict'; 
 

 
var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; 
 

 
// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd']; 
 
let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#bc80bd', '#bc80bd']; 
 
var weeks = ['January - 2016', 'February -2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016']; 
 

 
var width = document.querySelector('.chart-wrapper').offsetWidth, 
 
    height = document.querySelector('.chart-wrapper').offsetHeight, 
 
    minOfWH = Math.min(width, height)/2, 
 
    initialAnimDelay = 300, 
 
    arcAnimDelay = 150, 
 
    arcAnimDur = 3000, 
 
    secDur = 1000, 
 
    secIndividualdelay = 150; 
 

 
var radius = undefined; 
 

 
// calculate minimum of width and height to set chart radius 
 
if (minOfWH > 200) { 
 
    radius = 200; 
 
} else { 
 
    radius = minOfWH; 
 
} 
 

 
// append svg 
 
var svg = d3.select('.chart-wrapper').append('svg').attr({ 
 
    'width': width, 
 
    'height': height, 
 
    'class': 'pieChart' 
 
}).append('g'); 
 

 
svg.attr({ 
 
    'transform': 'translate(' + width/2 + ', ' + height/2 + ')' 
 
}); 
 

 
// for drawing slices 
 
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45); 
 

 
// for labels and polylines 
 
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85); 
 

 
// d3 color generator 
 
// let c10 = d3.scale.category10(); 
 

 
var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0); 
 

 
var pie = d3.layout.pie().value(function(d) { 
 
    return d; 
 
}); 
 

 
var draw = function draw() { 
 

 
    svg.append("g").attr("class", "lines"); 
 
    svg.append("g").attr("class", "slices"); 
 
    svg.append("g").attr("class", "labels"); 
 

 
    // define slice 
 
    var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie); 
 
    slice.enter().append('path').attr({ 
 
    'fill': function fill(d, i) { 
 
     return colors[i]; 
 
    }, 
 
    'd': arc, 
 
    'stroke-width': '25px' 
 
    }).attr('transform', function(d, i) { 
 
    return 'rotate(-180, 0, 0)'; 
 
    }).style('opacity', 0).transition().delay(function(d, i) { 
 
    return i * arcAnimDelay + initialAnimDelay; 
 
    }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)'); 
 

 
    slice.transition().delay(function(d, i) { 
 
    return arcAnimDur + i * secIndividualdelay; 
 
    }).duration(secDur).attr('stroke-width', '5px'); 
 

 
    var midAngle = function midAngle(d) { 
 
    return d.startAngle + (d.endAngle - d.startAngle)/2; 
 
    }; 
 

 
    var text = svg.select(".labels").selectAll("text").data(pie(dataset)); 
 

 
    text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) { 
 
    return colors[i]; 
 
    }).text(function(d, i) { 
 
    return weeks[i]; 
 
    }).attr('transform', function(d) { 
 
    // calculate outerArc centroid for 'this' slice 
 
    var pos = outerArc.centroid(d); 
 
    // define left and right alignment of text labels 
 
    pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1); 
 
    return 'translate(' + pos + ')'; 
 
    }).style('text-anchor', function(d) { 
 
    return midAngle(d) < Math.PI ? "start" : "end"; 
 
    }).transition().delay(function(d, i) { 
 
    return arcAnimDur + i * secIndividualdelay; 
 
    }).duration(secDur).style('opacity', 1); 
 

 
    text.on("mousemove", function(d, i) { 
 
    tooltip.html("the color here<br>is " + colors[i] + "<span style='color:" + colors[i] + ";'><br>This is a text in that color</span>").style('top', d3.event.pageY - 6 + 'px').style('left', d3.event.pageX + 14 + 'px').style("opacity", 1); 
 
    }).on("mouseout", function(d) { 
 
    tooltip.style("opacity", 0); 
 
    }); 
 

 
    var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset)); 
 

 
    polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) { 
 
    var pos = outerArc.centroid(d); 
 
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); 
 
    return [arc.centroid(d), arc.centroid(d), arc.centroid(d)]; 
 
    }).transition().duration(secDur).delay(function(d, i) { 
 
    return arcAnimDur + i * secIndividualdelay; 
 
    }).attr('points', function(d) { 
 
    var pos = outerArc.centroid(d); 
 
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); 
 
    return [arc.centroid(d), outerArc.centroid(d), pos]; 
 
    }); 
 
}; 
 

 
draw(); 
 

 
var button = document.querySelector('button'); 
 

 
var replay = function replay() { 
 

 
    d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); 
 
    d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); 
 
    d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); 
 

 
    setTimeout(draw, 800); 
 
};

Answer 1

您是否嘗試過使用每個元素的數據 - 標記來存儲數據，然後使用jQuery來讀取數據，並將其推到提示。這是我通常處理工具提示數據的方式，因爲它可以在元素上動態更新。

例子：

text.on("mouseover", function() { 
    var tip = $(this).attr("data-tip"); 
    yourtooltip.text(tip); 
}); 

<div class="text" data-tip="this is the data you want to display in your tooltip."></div>