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

Question

使用protovis，我生成类似于这个的烛台图表： http：//vis.stanford.edu/protovis/ex/candlestick-full.html 。我需要为特定的烛台注释图表。例如，我可以在12:00烛台的位置绘制三角形。如何找到特定烛台的位置（左下角）？

Answer 1

I believe the standard protovis approach to this is to make the annotation mark a child mark of the data point you're interested in, then set its visible property to only display for the data point you're interested in. For the candlestick example, it might look like this:

// 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;
    });

The other option, if you need to get the data outside of the protovis context (e.g. you want to show a div there with HTML text) would be to grab the data as it's being defined (e.g. in the bottom and height property functions of the candlestick definition) and store it in a global variable. This is pretty ugly, though.