D3.js Vega Lite API中多系列折线图的工具提示
我试图在一个可观察的笔记本中用Vega Lite API重新创建这个。我能够用Observable中的另一个例子中的多行序列重新创建标尺。但是我在添加工具提示时遇到了问题,我想添加股票代码和股票价格。这是我的名片。我将把工具提示规范放在哪里?谢谢D3.js Vega Lite API中多系列折线图的工具提示,d3.js,vega-lite,vega,observablehq,D3.js,Vega Lite,Vega,Observablehq,我试图在一个可观察的笔记本中用Vega Lite API重新创建这个。我能够用Observable中的另一个例子中的多行序列重新创建标尺。但是我在添加工具提示时遇到了问题,我想添加股票代码和股票价格。这是我的名片。我将把工具提示规范放在哪里?谢谢 plot = { // select a point for which to provide details-on-demand const hover = vl.selectSingle() .encodings('x')
plot = {
// select a point for which to provide details-on-demand
const hover = vl.selectSingle()
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.nearest(true) // select data point nearest the cursor
.empty('none'); // empty selection includes no data points
// define our base line chart
const line = vl.markLine()
.data(stocks)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('price'),
vl.color().fieldN('symbol'),
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(hover));
return vl.data(stocks)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color:'#c0c0c0'})
.transform(
vl.filter(hover),
vl.pivot({pivot: 'symbol', value: 'price', groupby: ['date']}))
.encode(vl.x().fieldT('date'),
vl.tooltip().fieldQ('price')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.select(hover) // use as anchor points for selection
.encode(vl.opacity().if(hover, vl.value(1)).value(0),
vl.tooltip(['symbol','price']))
)
.render(); }
下面是如何在该示例中使用pivot
vl.pivot('symbol')。value('price')。groupby(['date']))
这里的pivot帮助您将数据转换为表格式,这样您就可以在一行中获得所有符号价格。以下是Vega Lite API多线系列图表的完整工作示例,带有工具提示:
我无法在您链接的可观察笔记本中看到图表规格。你介意把它粘贴到你的问题中吗?对不起,如果你点击可观察笔记本的左列,它会显示代码。我可以把它复制过来。但我也在observable笔记本中显示了代码。看起来您的版本缺少pivot转换,这是在同一工具提示中显示所有行的值的关键。请看您在问题中链接的Vega Lite示例。谢谢,我也注意到了这一点。我不知道如何在vega lite api版本中格式化pivot转换。我更新了我的代码,但我认为我的格式不正确。