如何在特定數據點註釋圖表

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屬性函數中）並將其存儲在全局變量中。但這很醜陋。