在protovis圖表上繪制任意數量的線條

Question

我的目標

我試圖在protovis中為我的圖表添加任意數量的垂直線。 給定一個x截距值數組，我想循環遍歷這個數組並為每個截距值繪制一條垂直線。 現在，我能夠繪制固定數量的線，但是我很難概括。

我做了什么

我已經制作了一個jsfiddle，展示了如何向圖形中添加固定數量的行，並且還重現了下面的代碼。 在這里，我通過顯式編碼x_value0和x_value1添加了2行。 在代碼中，有兩段相關的protovis代碼，我將其標記為Section A Section B和Section B 。 Section A是protovis函數，它定義了繪制線的位置， Section B調用這些函數。

// X intercept values hard coded
var x_value0 = 30;
var x_value1 = 70;

new pvc.MetricDotChart({
    canvas:   "cccExample",
    width:    500,
    height:   400,
    axisGrid: true,
    axisZeroLine: false,
    selectable: true,

    extensionPoints: {

        plot_add: function() {
            var panel = new pv.Panel()
                // Quadrant rules above grid, but below dots.
                .zOrder(-1)

                ////
                // Section A Begin
                ////

                // Line 1
                .def('l0', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_value0);
                })

                // Line 2
                .def('l1', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_value1);
                })

                ////
                // Section A End
                ////

            ;

        ////
        // Section B Begin
        ////   

        // Line 1
            panel
            .add(pv.Rule)
            .top(0)
            .left  (function() { return this.parent.l0();     })
            .height(function() { return this.parent.height(); })
            .width(null)
            ;      

        // Line 2
            panel
            .add(pv.Rule)
            .top(0)
            .left  (function() { return this.parent.l1();     })
            .height(function() { return this.parent.height(); })
            .width(null)
            ;            

        ////
        // Section B End
        ////               

            return panel;      

        }
    }
})

.setData(testLDot2)
.render();  

我想要做的是將xvalues定義為數組，然后循環。 在我的嘗試中，我有點走了一半。 我做了第二個jsfiddle ，我嘗試將xvalues移動到一個數組中。 問題是我似乎無法成功地將相關部分包裝在for循環中。 該jsfiddle的代碼是：

// X intercept values in an array
var x_values = [30, 60];

new pvc.MetricDotChart({
    canvas:   "cccExample",
    width:    500,
    height:   400,
    axisGrid: true,
    axisZeroLine: false,
    selectable: true,

    extensionPoints: {

        plot_add: function() {
            var panel = new pv.Panel()
                // Quadrant rules above grid, but below dots.
                .zOrder(-1)

                ////
                // Section A Begin - How can I put this inside of a loop?
                ////

                // Line 1
                .def('l0', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_values[0]);
                })

                // Line 2
                .def('l1', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_values[1]);
                })

                ////
                // Section A End
                ////

            ;

        ////
        // Section B Begin - I'm able to successfully loop this part
        ////   

            for (i = 0; i < x_values.length; i++) {
                // The name of the .def function defined above
                var fn_name = 'this.parent.l' + i + '()';
                // Draw the lines
                    panel
                    .add(pv.Rule)
                    .top(0)
                    .left  (function() { return eval(fn_name);     })
                    .height(function() { return this.parent.height(); })
                    .width(null)
;      

            }

        ////
        // Section B End
        ////               

            return panel;      

        }
    }
})

.setData(testLDot2)
.render();

我能夠在一個for循環中包含Section B ，我想為Section A做類似的事情：

for (i = 0; i < x_values.length; i++) {
    .def('l'+i, function() {
        var ccc = this.getContext();
        var scale = ccc.chart.axes.base.scale;
        var li = ccc.panel._layoutInfo;
        return li.paddings.left + scale(x_values[i]);
    })
}

或類似的東西。 但問題是protovis似乎不允許我在這個.def塊周圍放置任何代碼。

我還嘗試為x_values數組中的每個項生成一個字符串，其中包含Section A函數的定義，然后使用eval()在protovis代碼中調用它，但到目前為止還沒有工作。

這里的任何幫助將不勝感激！

編輯 - 更多進展

通過消除Section A並在Section B移動該功能，我似乎已經接近了我想要的東西。 請參閱我最新的jsfiddle獲取該代碼。 以前，在Section B ， .left行稱為Section A定義的函數之一。 相反，我將該函數的定義移到.left代碼行中，如下所示：

////
// Section B Begin
////   

for (var i = 0; i < x_values.length; i++) {
    var x = x_values[i];
    // Lines
    panel
    .add(pv.Rule)
    .top(0)
    .left  (function() {                 
        var ccc = this.parent.getContext();
        var scale = ccc.chart.axes.base.scale;
        var li = ccc.panel._layoutInfo;
        return li.paddings.left + scale(x);                                     
    })
    .height(function() { return this.parent.height(); })
    .width(null)
    ;      
}

現在正在運行，但仍然不太正確：它只繪制x_values數組中的最后一行並覆蓋之前的所有行。 有任何想法嗎？

Answer 1

用以下代碼替換你的循環

panel
    .add(pv.Rule)
    .data(x_values)
    .top(0)
    .left  (
        function(d) {                 
        this.index * 20 + 15
        var ccc = this.parent.getContext();
        var scale = ccc.chart.axes.base.scale;
        var li = ccc.panel._layoutInfo;
        return li.paddings.left + scale(d);                                     
    })
    .height(function() { return this.parent.height(); })
    .width(null)
    ;     

小提琴http://jsfiddle.net/f9uhzaz9/