我试图在protovis中为我的图表添加任意数量的垂直线。给定一系列x截距值，我想在这个数组上循环并为每个截距值绘制一条垂直线。现在，我能够绘制固定数量的线，但是我很难概括。
我已经制作了一个jsfiddle，展示了如何向图表添加固定数量的行，并在下面复制了该代码。在这里，我通过明确编码x_value0和x_value1添加了2行。在代码中，有两段相关的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定义为数组，然后循环。在我的尝试中，我有一半的路程。我创建了second 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代码中调用它1}}，但到目前为止还没有工作。
非常感谢任何帮助！
我似乎已经通过消除eval()并在Section A内移动该功能而更接近我想要的东西。有关该代码，请参阅my latest jsfiddle。以前，在Section B中，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)
;
}
数组中的最后一行并覆盖之前的所有行。有什么想法吗？
答案 0 :(得分：3)
用以下代码替换你的循环
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)
;