私の目標
protovis のチャートに任意の数の垂直線を追加しようとしています。x 切片値の配列が与えられた場合、この配列をループして、切片値ごとに垂直線を描画したいと思います。現在、一定数の線を描くことはできますが、一般化するのに苦労しています。
私がしたこと
一定数の行をグラフに追加する方法を示すjsfiddleを作成し、そのコードを以下に再現しました。x_value0ここでは、 andを明示的にコーディングして 2 行追加しましx_value1た。コードには、関連する 2 つの protovis コードがSection AありSection Bます。 Section A線が描画される場所を定義し、それらの関数をSection B呼び出す protovis 関数です。
// 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、配列として定義し、それをループすることです。私は自分の試みの途中にいるようなものです。を配列に移動しようとする2番目のjsfiddlexvaluesを作成しました。問題は、関連する部分を 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ます。 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]);
})
}
または似たようなもの。.defしかし問題は、protovis では、このブロックの周りにコードを配置することが許可されていないように見えることです。
x_values関数の定義を含む配列内の各項目の文字列を生成し、Section Aを使用して protovis コード内で呼び出すことも試みましeval()たが、これまでのところうまくいきませんでした。
ここで何か助けていただければ幸いです。
編集 - さらなる進歩
Section Aその機能を削除して内部に移動することで、私が望むものに近づいたようですSection B。そのコードについては、私の最新の jsfiddleを参照してください。以前は、 で定義された関数の 1 つを呼び出しSection Bた行でした。代わりに、次のように、その関数の定義をコード行内に移動しました。.leftSection 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。配列の最後の行を描画するだけで、以前の行をすべて上書きしています。何か案は？