1
ここに初めて質問を投稿しました。私はバージョン3のd3パス・ライン・トランジション・コードをバージョン4に変換しており、苦労しています。d3バージョン4のパスラインが滑らかに移行し、マイク・ボストックの例が
まず、バージョン4の非タイムx軸との滑らかなライントランジションのMikeの例（約2日間のagaoを掲載）を見たので、バージョン3のx軸の例と同様のことをしました。パス線は円滑に移動しますが、x軸は移動しません。また、私の仕事のために、私は彼がこの例で行った場所からの移行を引き起こすことができないので、ティック関数で変数 "this"を使用することはできません。ここでは、コードは次のとおりです。ダニ機能で
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
(function() {
var n = 243,
duration = 750,
now = new Date(Date.now() - duration),
count = 0,
data = d3.range(n).map(function() { return 0; });
random = d3.randomNormal(0, .2),
data = d3.range(n).map(random);
var margin = {top: 6, right: 0, bottom: 20, left: 40},
width = 960 - margin.right,
height = 120 - margin.top - margin.bottom;
var x = d3.scaleTime()
.domain([now - (n - 2) * duration, now - duration])
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.x(function(d, i) { return x(now - (n - 1 - i) * duration); })
.y(function(d, i) { return y(d); });
var svg = d3.select("body").append("p").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.axisBottom().scale(x));
var timeline = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line")
.transition()
.duration(500)
.ease(d3.easeLinear)
.on("start", tick);
var transition = d3.select({}).transition()
.duration(750)
.ease(d3.easeLinear);
function tick() {
data.push(random());
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data)]);
// redraw the line
svg.select(".line")
.attr("d", line)
.attr("transform", null);
// slide the x-axis left
axis.call(x.axis);
// slide the line left
d3.active(this)
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
.transition().on("start", tick);
// pop the old data point off the front
data.shift();
}
})()
</script>
</body>
、そこに「これは」、デバッグから、私はそれがパスだがわかったので、私はd3.activeと交換しようとしている（D3 .selectAll（ "path"））、またはd3.active（d3.selectAll（ "。line"））のいずれも機能しません。また、パスに可変タイムラインを割り当てようとしたので、d3.active（タイムライン）を試しました。どちらもうまくいきません。
私はこの問題に関して私の知恵の末尾にいる。私はd3 googleグループに投稿しましたが、誰も答えませんでした。私はここに誰かが私にいくつかの提案を与えることを願っています。
おかげ
ダイアナ