我的目标
我正在尝试在 protovis 中的图表中添加任意数量的垂直线。给定一个 x 截距值数组，我想循环遍历这个数组并为每个截距值画一条垂直线。现在，我可以画出固定数量的线条，但无法概括。
我做了什么
我制作了一个jsfiddle，展示了如何向图形添加固定数量的线，并在下面复制了该代码。在这里，我通过显式编码添加了 2 行，x_value0并且x_value1. 在代码中，有两段相关的 protovis 代码，我已将它们标记为Section A和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();
我能够包裹Section B在 for 循环中，并且我想做类似的事情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函数的定义，然后使用 protovis 代码在 protovis 代码中调用它eval()，但到目前为止还没有奏效。
这里的任何帮助将不胜感激！
编辑 - 更多进展
通过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数组中的最后一行并覆盖所有以前的行。有任何想法吗？