如何在特定数据点注释图表

Question

使用Protovis，我生成一个与此类似的烛台图表：http://vis.stanford.edu/protovis/ex/candlestick-full.html。我需要为特定烛台注解图表。例如，我可以在12点烛台位置绘制三角形。我如何找到特定烛台的位置（左侧和底部）？

Answer 1

我相信标准protovis方法是为了使注释标记成为您感兴趣的数据点的子标记，然后将其visible属性设置为仅显示您感兴趣的数据点。烛台例如，它可能是这样的：

// the thin line of the candlestick 
var candlestick = vis.add(pv.Rule) 
    .data(vix) 
    .left(function(d) x(d.date)) 
    .bottom(function(d) y(Math.min(d.high, d.low))) 
    .height(function(d) Math.abs(y(d.high) - y(d.low))) 
    .strokeStyle(function(d) d.open < d.close ? "#ae1325" : "#06982d"); 

// the thick line of the candlestick 
candlestick.add(pv.Rule) 
    .bottom(function(d) y(Math.min(d.open, d.close))) 
    .height(function(d) Math.abs(y(d.open) - y(d.close))) 
    .lineWidth(10); 

// the annotation mark 
candlestick.add(pv.Dot) 
    .size(40) 
    .shape("triangle") 
    .left(function() { 
     // candlestick here refers to the parent instance 
     return candlestick.left() 
    }) 
    .top(function() { 
     // candlestick here refers to the parent instance 
     // this is 10px from the top of the candlestick 
     return h - candlestick.bottom() - candlestick.height() - 10; 
    }) 
    .visible(function(d) { 
     // only show the mark for the data we care about - here, June 12 
     // (month is 0-based) 
     return d.date.getUTCMonth() == 5 && d.date.getUTCDate() == 12; 
    }); 

另一种选择，如果你需要得到protovis上下文之外的数据（例如，你想显示div有HTML文本）将抢在定义数据时（例如在candlestick定义的bottom和height属性函数中）并将其存储在全局变量中。但这很丑陋。