Javascript 热图矩形内的标签
我想在框中显示热图框的值,而不仅仅是在工具提示中 看起来,虽然此功能尚未根据添加,但d3.js是否可以实现此功能?谢谢 热图:Javascript 热图矩形内的标签,javascript,d3.js,dc.js,Javascript,D3.js,Dc.js,我想在框中显示热图框的值,而不仅仅是在工具提示中 看起来,虽然此功能尚未根据添加,但d3.js是否可以实现此功能?谢谢 热图: heatMap .width(1000) .height(400) .dimension(dimension) .group(filtered_heatMap_group) .margins({ left
heatMap
.width(1000)
.height(400)
.dimension(dimension)
.group(filtered_heatMap_group)
.margins({
left: 200,
top: 30,
right: 10,
bottom: 50
})
.keyAccessor(function (d) {
return d.key[0];
})
.valueAccessor(function (d) {
return d.key[1];
})
.colorAccessor(function (d) {
return +d.value.color;
})
.title(function (d) {
return "Manager: " + d.key[1] + "\n" +
"FTE: " + d.value.toolTip + "\n" +
"Date: " + d.key[0] + "";
})
.rowOrdering(d3.descending);
细节是魔鬼 在框中输入一些文本非常容易。将它们很好地定位和格式化需要更多的工作。不管怎样,我会设法让你开始的 您可以使用
renderlet
事件pretransition
会更好,但我们需要从rect
s中窃取一些属性,因为图表的刻度无法访问,并且这些属性并非在pretransition
时间初始化
这是dc.js中注释的常见模式:等待图表事件,然后选择现有元素并向其中添加内容。元素选择器为;我们需要g.box-group
剩下的是标准的D3通用更新模式,除了我提到的,我们不能访问天平。我们可以从这些g
s中的rect
读取属性,如x
、y
、width
、height
,而不是试图复制该语言并可能弄错
SVG没有多行文本,所以我们必须在元素内部创建元素
综上所述:
.on('renderlet.label', function(chart) {
var text = chart.selectAll('g.box-group')
.selectAll('text.annotate').data(d => [d]);
text.exit().remove();
// enter attributes => anything that won't change
var textEnter = text.enter()
.append('text')
.attr('class', 'annotate')
textEnter.selectAll('tspan')
.data(d => [d.key[1], d.value.toolTip, d.key[0]])
.enter().append('tspan')
.attr('text-anchor', 'middle')
.attr('dy', 10);
text = textEnter.merge(text);
// update attributes => position and text
text
.attr('y', function() {
var rect = d3.select(this.parentNode).select('rect');
return +rect.attr('y') + rect.attr('height')/2 - 15;
});
text.selectAll('tspan')
.attr('x', function() {
var rect = d3.select(this.parentNode.parentNode).select('rect');
return +rect.attr('x') + rect.attr('width')/2;
})
.text(d => d);
})
请注意,我放弃了,并将文本向上推了15px。。。可能有,也可能没有更好的方法来获得多行文本的垂直居中
即使没有描述,文本也不太合适。我会让你弄明白的
但它就在那里,而且更新正确: