Javascript d3js中svg热图/颜色比例的工具提示
我正在用AngularJS调整这个梯度。下面是我正在使用的数据集的一部分：Javascript d3js中svg热图/颜色比例的工具提示,javascript,angularjs,d3.js,svg,Javascript,Angularjs,D3.js,Svg,我正在用AngularJS调整这个梯度。下面是我正在使用的数据集的一部分： var stays=[ { day:2, hour:1, time_spent:127 }, { day:4,
var stays=[
{
day:2,
hour:1,
time_spent:127
},
{
day:4,
hour:1,
time_spent:141
},
{
day:1,
hour:1,
time_spent:134
},
{
day:5,
hour:1,
time_spent:174
},
{
day:3,
hour:1,
time_spent:131
},
{
day:6,
hour:1,
time_spent:333
}];
var heatMap = svg.selectAll(".hour")
.data(stays)
.enter().append("rect")
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
.attr("y", function(d) { return (d.day - 1) * gridSize; })
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("stroke", "white")
.style("stroke-opacity", 0.6)
.style("stroke-width", 0.8)
.style("fill", function(d) { return colorScale(d.time_spent); })
.on("mouseover", function(d, i) {
// Construct tooltip
var tooltip_html = '';
tooltip_html += '<div class="header"><strong>' + 'Stays' + ' </strong></div><br>';
// Add info to the tooltip
angular.forEach(stays, function (d) {
tooltip_html += '<div><span><strong>' + makeid() + '</strong></span>';
tooltip_html += '<span>' + ' ' + d.time_spent + '</span></div>';
console.log(d.time_spent);
}, days);
// Set tooltip width
tooltip.html(tooltip_html)
.style("width", 300 + "px")
.style("left", (d3.event.layerX+10) + "px")
.style("top", (d3.event.layerY+10) + "px");
// Tooltip transition and more styling
tooltip.style('display', 'block')
.transition()
.ease('ease-in')
.duration(100)
.style("opacity", .9);
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(100)
.ease('ease-in')
.style('opacity', 0);
});
var heatMap=svg.selectAll（“.hour”）
.数据（停留）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{return（d.hour-1）*gridSize；}）
.attr（“y”，函数（d）{return（d.day-1）*gridSize；}）
.attr（“类”、“小时边界”）
.attr（“宽度”，网格大小）
.attr（“高度”，网格大小）
.style（“笔划”、“白色”）
.style（“笔划不透明度”，0.6）
.样式（“笔划宽度”，0.8）
.style（“fill”，函数（d）{return colorScale（d.time_-spend）；}）
.on（“鼠标悬停”，功能（d，i）{
//构造工具提示
var工具提示\u html=''；
工具提示html+=''+'保持'+'
'；
//将信息添加到工具提示中
角度。forEach（撑杆，功能（d）{
工具提示（html++=''+makeid（）++''；
工具提示html+=''+''+d.花费的时间+''；
console.log（d.花费的时间）；
}，天）；
//设置工具提示宽度
html（tooltip\uhtml）
.样式（“宽度”，300+“像素”）
.style（“左”（d3.event.layerX+10）+“px”）
.style（“顶部”（d3.event.layerY+10）+“px”）；
//工具提示转换和更多样式
tooltip.style（'显示'，'块'）
.transition（）
.ease（'ease-in'）
.持续时间（100）
.样式（“不透明度”，.9）；
})
.on（“mouseout”），函数（d）{
tooltip.transition（）
.持续时间（100）
.ease（'ease-in'）
.style（'opacity'，0）；
});
这里的想法是，对于我访问的每个方块，工具提示将显示关联到该方块的标签（我仍然没有使用标签，但它们将是我显示的数据集的一部分，我使用
makeid（）花费的时间\u