0
新しい点を追加して更新されるラインパスを描画しています。 xの軸の長さはわからないので、これは進捗が続く時間に依存しますので、これを使ってyのデータをスケールしたいと思います。この例では、x軸の2つの異なるスケールのsampeグラフを持っていますので、xScaleの値をdisplayGraphメソッドに渡しましたが、これを動的に計算して現在のdataサイズに適合させたいと思います。再描画中に動的にD3データ系列をスケーリングする
function displayGraph(id, data, name, xScale, width, height, interpolation, animate, updateDelay, transitionDelay) {
var margin = {
top: 10,
right: 20,
bottom: 30,
left: 50
},
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom
var rangeX = xScale
var svg = d3.select(id)
.append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
var graph = svg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.linear().domain([0, rangeX]).range([0, width]); // max(x) is 100
var y = d3.scale.linear().domain([0, 1]).range([height, 0]); // max(y) is 1
var line = d3.svg.line()
.x(function(d, i) {
return x(i);
})
.y(function(d) {
return y(d.value);
})
.interpolate(interpolation)
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);
var color = d3.scale.category10();
graph.append("svg:path")
.attr("d", line(data))
.attr("class", "line")
.style('stroke', function(d, i) {
console.log(i, d);
return color(Math.random());
});
graph.append("g") // Add the X Axis
.attr('stroke', function(d) {
return "steelblue"
})
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width)
.attr("y", -20)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function(d) {
return "progress"
});
graph.append("g") // Add the Y Axis
.attr('stroke', function(d) {
return "steelblue"
})
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 4)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function(d) {
return name
});
graph.append("text")
.attr("x", width/2)
.attr("y", 0)
.attr('stroke', "steelblue")
.style("text-anchor", "middle")
.text("Model " + name);
graph.append("text")
.attr("x", width)
.attr("y", height + margin.bottom)
.attr('stroke', "steelblue")
.style("text-anchor", "middle")
.text("progress");
graph.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height/2))
.attr("dy", "1em")
.attr('stroke', "steelblue")
.style("text-anchor", "middle")
.text(name);
function redrawWithAnimation() {
//x.domain(d3.extent(data, function(d,i) { return i; }));
x.domain([0, rangeX]); // max(x) is 100
//x.domain([0, d3.max(data, function(d,i) { return i })]);
y.domain([0, d3.max(data, function(d) {
return d.value;
})]);
graph.selectAll("path")
.data([data])
.attr("transform", "translate(" + x(1) + ")")
.attr("d", line)
.transition()
.ease("linear")
.duration(transitionDelay)
.attr("transform", "translate(" + x(0) + ")");
}
function redrawWithoutAnimation() {
// static update without animation
graph.selectAll("path")
.data([data]) // set the new data
.attr("d", line); // apply the new data values
}
setInterval(function() {
if (animate) {
redrawWithAnimation();
} else {
redrawWithoutAnimation();
}
}, updateDelay);
} //displayGraph
var data = {
lr: [],
loss: []
};
var dataIn = {
"lr": [{
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.099989,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.089951,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.079985,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.06995,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.059958,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.04995,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.039952,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.029958,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.019951,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.009958,
"name": "lr"
}, {
"value": 0.000012,
"name": "lr"
}, {
"value": 0.000012,
"name": "lr"
}, {
"value": 0.000012,
"name": "lr"
}],
"loss": [{
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 4.045375,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.31036,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.359995,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.298786,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.307065,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269755,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.269757,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.238867,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.234115,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.199203,
"name": "loss"
}, {
"value": 1.188584,
"name": "loss"
}, {
"value": 1.188584,
"name": "loss"
}, {
"value": 1.188584,
"name": "loss"
}]
}
// display
displayGraph("#graph1", data.lr, "lr", 50, 400, 150, "basis", true, 1000, 1000); //linear
displayGraph("#graph2", data.lr, "lr", 100, 400, 150, "basis", true, 1000, 1000); //linear
// update data
setInterval(function() {
var lr = dataIn.lr.shift();
if (lr) data.lr.push(lr);
var loss = dataIn.loss.shift();
if (loss) data.loss.push(loss);
}, 1000);path {
/*stroke: steelblue;*/
stroke-width: 1;
fill: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style="display:block;height:500px;">
<div id="graph1" class="aGraph" style="height:200px;"></div>
<div id="graph2" class="aGraph" style="height:200px;"></div>
</div>
ありがとうございます！それは素晴らしいことです。おそらく 'y '軸スケール（非常に小さな数値）のために、私は' logarithmic'のようなスケールを変更することができますか？ 'x'軸に関しては、データを見ると' progress'値、すなわち進捗のパーセンテージがありますが、毎回新しいデータをpushしているので、 'x'のインデックス値を使っていますあなたが私が何を意味しているか分からない場合、「進歩」よりも。 – loretoparisi