DC.js - 复合图表 - 访问 renderlet 中的堆栈号并使用网格线发布
DC.js - Composite charts - Access the stack number inside renderlet and issue with gridlines
我正在尝试为 DC 图表实现 D3 工具提示。
这是堆叠条形图的分组:
var XDimension = ndx.dimension(function(d) {
return d.no;
});
var YDimension = XDimension.group().reduce(
function reduceAdd(p, d) {
++p.count;
p.bottom += +d.bottom;
p.top += +d.top;
p.extra += +d.extra;
p.avg = p.bottom ? (p.top / p.bottom) : 0;
p[d.sub_no] = (p[d.sub_no] || 0) + p.bottom ? (p.top / p.bottom) : 0;
return p;
},
function reduceRemove(p, d) {
--p.count;
p.bottom -= +d.bottom;
p.top -= +d.top;
p.extra -= +d.extra;
p.avg = p.bottom ? (p.top / p.bottom) : 0;
p[d.sub_no] = (p[d.sub_no] || 0) - p.bottom ? (p.top / p.bottom) : 0;
return p;
},
function reduceInitial() {
return {
count: 0,
bottom: 0,
top: 0,
extra: 0,
avg: 0
};
});
为了在 renderlet 中访问这些值,我使用了 d.data.key、d.y、d.data.value.top 等。这是代码片段:
stacks.on('renderlet', function(chart) {
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)')
chart.selectAll('rect')
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(500)
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key + ' [' + d.data.value[this] + '] ' +
'</th></tr></thead><tbody> <tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Value: ' +
'</b></td> <td>' + numberFormat(d.y) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Extra: ' + '</b></td> <td>' + numberFormat(d.data.value.extra) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Top: ' + '</b></td> <td>' + numberFormat(d.data.value.top) + '</td></tr>' + '</tbody></table>')
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(500)
div.transition()
.duration(500)
.style("opacity", 0)
})
但是我无法在鼠标悬停时获取堆栈编号。
什么是 d3.js 访问 'renderlet 内堆积条形图中的堆栈编号的等效代码?
编辑
我在系列图表中还面临一个问题。我在工具提示的系列图表中使用相同的逻辑。我使用 'circle'
而不是 'rect'
,因此当悬停在某个数据点上时,会显示工具提示。 Circle 的行为符合预期,但水平和垂直网格线各自存在一些问题。
- 它们不会在鼠标移出时消失,而是会一直停留到悬停在另一个圆圈上。
- 由于它是一个系列图表,所以有多条线,鼠标悬停在一行中的数据点上似乎不受鼠标悬停在另一行上的影响。如下图所示:
如图所示,即使悬停在橙色线上,蓝线上的网格线仍然可见。
我该如何解决这些问题?
看绑定数据到一个rect
d.layer
等于组的栈号
我正在尝试为 DC 图表实现 D3 工具提示。
这是堆叠条形图的分组:
var XDimension = ndx.dimension(function(d) {
return d.no;
});
var YDimension = XDimension.group().reduce(
function reduceAdd(p, d) {
++p.count;
p.bottom += +d.bottom;
p.top += +d.top;
p.extra += +d.extra;
p.avg = p.bottom ? (p.top / p.bottom) : 0;
p[d.sub_no] = (p[d.sub_no] || 0) + p.bottom ? (p.top / p.bottom) : 0;
return p;
},
function reduceRemove(p, d) {
--p.count;
p.bottom -= +d.bottom;
p.top -= +d.top;
p.extra -= +d.extra;
p.avg = p.bottom ? (p.top / p.bottom) : 0;
p[d.sub_no] = (p[d.sub_no] || 0) - p.bottom ? (p.top / p.bottom) : 0;
return p;
},
function reduceInitial() {
return {
count: 0,
bottom: 0,
top: 0,
extra: 0,
avg: 0
};
});
为了在 renderlet 中访问这些值,我使用了 d.data.key、d.y、d.data.value.top 等。这是代码片段:
stacks.on('renderlet', function(chart) {
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)')
chart.selectAll('rect')
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(500)
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key + ' [' + d.data.value[this] + '] ' +
'</th></tr></thead><tbody> <tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Value: ' +
'</b></td> <td>' + numberFormat(d.y) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Extra: ' + '</b></td> <td>' + numberFormat(d.data.value.extra) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Top: ' + '</b></td> <td>' + numberFormat(d.data.value.top) + '</td></tr>' + '</tbody></table>')
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(500)
div.transition()
.duration(500)
.style("opacity", 0)
})
但是我无法在鼠标悬停时获取堆栈编号。
什么是 d3.js 访问 'renderlet 内堆积条形图中的堆栈编号的等效代码?
编辑
我在系列图表中还面临一个问题。我在工具提示的系列图表中使用相同的逻辑。我使用 'circle'
而不是 'rect'
,因此当悬停在某个数据点上时,会显示工具提示。 Circle 的行为符合预期,但水平和垂直网格线各自存在一些问题。
- 它们不会在鼠标移出时消失,而是会一直停留到悬停在另一个圆圈上。
- 由于它是一个系列图表,所以有多条线,鼠标悬停在一行中的数据点上似乎不受鼠标悬停在另一行上的影响。如下图所示:
如图所示,即使悬停在橙色线上,蓝线上的网格线仍然可见。
我该如何解决这些问题?
看绑定数据到一个rect
d.layer
等于组的栈号