Javascript EventDrops.js的eventHover上的可视化额外数据
我正在使用Javascript EventDrops.js的eventHover上的可视化额外数据,javascript,d3.js,graph,data-visualization,Javascript,D3.js,Graph,Data Visualization,我正在使用Eventdrops.js0.2.0版开发一个小工具。我之所以使用这个版本,是因为我只需要javascript文件,而不需要nodejs和其他东西。我成功地在图表上绘制了数据,但我的问题是在eventhoverevent上显示额外数据。我使用以下方法生成数据和处理事件的代码: javascript代码 data = [{name: "(X) - Erro", dates: XdataErro.map(function(a){return a.timestamp;})
Eventdrops.js
0.2.0版开发一个小工具。我之所以使用这个版本,是因为我只需要javascript
文件,而不需要nodejs和其他东西。我成功地在图表上绘制了数据,但我的问题是在eventhover
event上显示额外数据。我使用以下方法生成数据和处理事件的代码:
javascript代码
data = [{name: "(X) - Erro", dates: XdataErro.map(function(a){return a.timestamp;}).reverse(), data: XdataErro.map(function(a){return a.message;}), color: "red"},
{name: "(X) - Info", dates: XdataInfo.map(function(a){return a.timestamp;}).reverse(), data: XdataInfo.map(function(a){return a.message;}), color: "green"},
{name: "(X - AC) - Erro", dates: XACdataErro.map(function(a){return a.timestamp;}).reverse(), data: XACdataErro.map(function(a){return a.message;}), color: "red"},
{name: "(X - AC) - Info", dates: XACdataInfo.map(function(a){return a.timestamp;}).reverse(), data: XACdataInfo.map(function(a){return a.message;}), color: "green"},
{name: "(AC - X) - Erro", dates: ACXdataErro.map(function(a){return a.timestamp;}).reverse(), data: ACXdataErro.map(function(a){return a.message;}), color: "red"},
{name: "(AC - X) - Info", dates: ACXdataInfo.map(function(a){return a.timestamp;}).reverse(), data: ACXdataInfo.map(function(a){return a.message;}), color: "green"},
{name: "(Y-X) - Erro", dates: YXdataErro.map(function(a){return a.timestamp;}).reverse(),data: YXdataErro.map(function(a){return a.message;}), color: "red"},
{name: "(Y-X) - Info", dates: YXdataInfo.map(function(a){return a.timestamp;}).reverse(),data: YXdataInfo.map(function(a){return a.message;}), color: "green"},
{name: "(X-Y) - Erro", dates: XYdataErro.map(function(a){return a.timestamp;}).reverse(),data: XYdataErro.map(function(a){return a.message;}), color: "red"},
{name: "(X-Y) - Info", dates: XYdataInfo.map(function(a){return a.timestamp;}).reverse(),data: XYdataInfo.map(function(a){return a.message;}), color: "green"}];
var eventDropsChart = d3.chart.eventDrops();
eventDropsChart.start(startTime)
.width(window.innerWidth)
.eventLineColor(function(e){
console.log(e);
return e.color;
}).eventHover((n) => {
var series = n.parentNode.firstChild.innerHTML;
var timestamp = d3.select(n).data()[0];
var message = d3.select(n).data()[1];
document.getElementById('legend').innerHTML = 'Mensagem = '+message+ ' \nTempo = ' + timestamp + '\nseries "' + series + '"';
});
我必须输入日期
和数据
,第二个字段用于填充“mensage”的值(图1),但我无法从数据中解析该值。如何从数据源解析此值
我有完全相同的问题,你做了吗?我有完全相同的问题,你做了吗??