そこで、私は R & ggplot2 を使用して順調に進み、データ分析の結果を共有しています。ただし、よりインタラクティブなものが必要です。Highcharts.js を使用しましたが、多くのデータ ポイントの重みで機能しなくなり、カスタマイズの柔軟性があまりありません。それで、私は過去にプロトビスで少し遊んだことがありますが、今は D3 を機能させようとしています。
私の2つの重要な問題は次のとおりです。
- データセットの一部へのポインターを渡してライン定義を再利用する方法
- ツールチップ (ある程度の進歩があり、誰かがここで明白な答えを見ない限り、別の投稿でフォローアップします)
以下のコードでは、行の宣言と、svg とスタイリングに追加するためにこれらの関数が呼び出される場所を強調表示しています。
私が探しているのは、パラメーターを line 関数に渡して、特定の行に追加するデータ要素を指定する方法を理解するのに役立ちます。データを別の方法でフォーマットする必要がある可能性があります。それが最善の解決策であれば、それは完全に可能です。
どんな入力でも大歓迎です！
----------------更新----------------
ここで必要なヘルプ:
// MPGL
var line1 = d3.svg.line()
.x(function(d,i) {return x(startTime + (timeStep*i));})
.y(function(d) {return y(d.MPGL+d.MPGI+d.MTTFB);})
渡す代わりに
.y(function(d) {return y(d.MPGL+d.MPGI+d.MTTFB);})
次のようなより一般的な宣言が必要です。
.y(function(d) {return y(Z);})
次に、その一般的な行ステートメントを次のように呼び出します。
graph.append("svg:path").attr("d", line1(<something_corresponding_to_Z_here>)).attr("class", "MPGL");
それで、これは可能ですか、それとも私はただ夢を見ているだけですか？データを別の方法で分割する必要がありますか?
---------------- /更新----------------
完全なコードはこちら:
<html>
<head>
<title>D3.js Test</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body { font-family: "Helvetica Neue", Helvetica;}
/* tell the SVG path to be a thin line without any area fill */
path { stroke-width: 1; fill: none;}
/* Define Line color based on category class */
.MPGL {stroke: #644a9b;}
.MPGI {stroke: #009966;}
.MTTFB {stroke: #0066FF;}
/* Axis Formatting/styling */
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.x.axis text {
font-size: 10px;
}
.y.axis line, .y.axis path {
fill: none;
stroke: lightgrey;
}
.y.axis text {
font-size: 12px;
}
</style>
</head>
<body>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
<script>
// define dimensions of graph
var m = [20, 20, 20, 40]; // margins
var w = 550; // width
var h = 300; // height
data = [ { "WK" : 14, "EOBSHR" : 1364839200000, "VOL" : 71383, "MPGL" : 2.901, "MPGI" : 1.203, "MTTFB" : 1.221, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364842800000, "VOL" : 70447, "MPGL" : 2.804, "MPGI" : 1.182, "MTTFB" : 1.211, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364846400000, "VOL" : 64878, "MPGL" : 2.781, "MPGI" : 1.169, "MTTFB" : 1.172, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364850000000, "VOL" : 56668, "MPGL" : 2.734, "MPGI" : 1.18, "MTTFB" : 1.153, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364853600000, "VOL" : 48721, "MPGL" : 2.722, "MPGI" : 1.134, "MTTFB" : 1.137, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364857200000, "VOL" : 45605, "MPGL" : 2.862, "MPGI" : 1.155, "MTTFB" : 1.116, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364860800000, "VOL" : 51002, "MPGL" : 3.219, "MPGI" : 1.136, "MTTFB" : 1.124, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364864400000, "VOL" : 62180, "MPGL" : 3.7, "MPGI" : 1.13, "MTTFB" : 1.143, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364868000000, "VOL" : 67299, "MPGL" : 3.965, "MPGI" : 1.198, "MTTFB" : 1.221, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364871600000, "VOL" : 58893, "MPGL" : 3.953, "MPGI" : 1.275, "MTTFB" : 1.24, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364875200000, "VOL" : 52752, "MPGL" : 4.082, "MPGI" : 1.373, "MTTFB" : 1.295, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364878800000, "VOL" : 55881, "MPGL" : 4.401, "MPGI" : 1.393, "MTTFB" : 1.39, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364882400000, "VOL" : 65844, "MPGL" : 4.608, "MPGI" : 1.394, "MTTFB" : 1.37, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364886000000, "VOL" : 78441, "MPGL" : 4.484, "MPGI" : 1.366, "MTTFB" : 1.399, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364889600000, "VOL" : 91130, "MPGL" : 4.047, "MPGI" : 1.321, "MTTFB" : 1.57, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364893200000, "VOL" : 89911, "MPGL" : 3.674, "MPGI" : 1.248, "MTTFB" : 1.314, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364896800000, "VOL" : 81673, "MPGL" : 3.548, "MPGI" : 1.298, "MTTFB" : 1.301, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364900400000, "VOL" : 85718, "MPGL" : 3.515, "MPGI" : 1.245, "MTTFB" : 1.289, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364904000000, "VOL" : 95746, "MPGL" : 3.541, "MPGI" : 1.236, "MTTFB" : 1.306, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 },
{ "WK" : 14, "EOBSHR" : 1364907600000, "VOL" : 105282, "MPGL" : 3.296, "MPGI" : 1.201, "MTTFB" : 1.273, "mPGL" : 3.549, "mPGI" : 1.274, "mTTFB" : 1.248 }]
// Find timeframe of dataset to create variables for display
var startTime = d3.min(data, function(d) { return d.EOBSHR; });
var endTime = d3.max(data, function(d) { return d.EOBSHR; })
var timeStep = 3600000;
// Setup scales to adjust display size based on content
var x = d3.time.scale().domain([startTime, endTime]).range([0, w]);
x.tickFormat(d3.time.format("%Y-%m-%d"));
var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.MPGL+d.MPGI+d.MTTFB; })]).range([h, 0]);
// create a line function that can convert data[] into x and y points
//*********************************************
//*********************************************
//
// This is the area where input is needed!
//
//*********************************************
//*********************************************
// MPGL
var line1 = d3.svg.line()
.x(function(d,i) {return x(startTime + (timeStep*i));})
.y(function(d) {return y(d.MPGL+d.MPGI+d.MTTFB);})
// MPGI
var line2 = d3.svg.line()
.x(function(d,i) {return x(startTime + (timeStep*i));})
.y(function(d) {return y(d.MPGI+d.MTTFB);})
// MTTFB
var line3 = d3.svg.line()
.x(function(d,i) { return x(startTime + (timeStep*i)); })
.y(function(d) { return y(d.MTTFB);})
//--------------------------------------------------------------------
// Creating the visualization by pulling all of the elements together
//--------------------------------------------------------------------
// Add an SVG element with the desired dimensions and margin.
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(1);
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(6).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-10,0)")
.call(yAxisLeft);
//*********************************************************
// How do I pass something in the line_x_(...) portion
// that would give the function a clue which data point
// to add to the line/path?
//*********************************************************
// add lines
// do this AFTER the axes above so that the line is above the tick-lines
graph.append("svg:path").attr("d", line1(data)).attr("class", "MPGL");
graph.append("svg:path").attr("d", line2(data)).attr("class", "MPGI");
graph.append("svg:path").attr("d", line3(data)).attr("class", "MTTFB");
</script>
</body>
</html>