0
새 점을 추가하여 업데이트 된 라인 경로를 그립니다. 축 길이가 x인지 알지 못하기 때문에 진행 시간에 따라 다르므로 y 데이터를 축척하고 싶습니다. 이 예제에서는 x 축의 두 가지 다른 축에 대한 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' 축척 (매우 작은 숫자) 때문에'logarithm'과 같은 축척을 변경할 수 있습니까? 'x' 축에 관해서는, 만약 당신이 데이터를 보면'progress' 값 즉 진행률입니다. 그러나 모든 틱마다 새로운 데이터를 넣기 때문에'x'에 인덱스 값을 사용하고 있습니다. '진도'보다, 내가 무슨 뜻인지 안다면 확신 할 수 없다. – loretoparisi