我正在创建一个与蓝牙心率监视器一起使用的应用程序，并且我将使用D3.js实时绘制心率图。当前，我只是在创建一个简单的示例，以后可以对其进行调整以使用真实数据。
基本上，我在此阶段要做的就是在最后一分钟绘制随机生成的数据。数据读数是形式为的虚拟读数的数组{timestamp: (the time which it was generated), hr:(num between 0 and 1)}。最初的读数将为空，但每秒将显示当前时间的新随机值。
由于某种原因，该图未显示，但是我的代码中未报告任何错误。x轴似乎正确并且过渡良好。任何建议或帮助将不胜感激。
由于不确定问题的根源，我将发布整个代码。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: blue;
stroke-width: 2px;
}
</style>
<svg width="600" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var n = 40,
random = d3.randomUniform(0, 1),
readings = [],
currentReadings = [],
duration = 1000,
now = new Date(Date.now() - duration);
startTime = new Date();
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scaleTime()
.domain([now - 60000, now])
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
var line = d3.line()
.x(function(data) { return xScale(data.time); })
.y(function(data) { return yScale(data.hr); })
.curve(d3.curveBasis);
g.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var xAxisGroup = g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis = d3.axisBottom(xScale).
ticks(3));
var yAxisGroup = g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
var path = g.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(currentReadings)
.attr("class", "line")
.transition()
.duration(1000)
.ease(d3.easeLinear)
.on("start", tick);
function tick() {
now = new Date();
// update the x axis domain and slide left
xScale.domain([now - 60000, now]);
xAxisGroup.call(xAxis);
// generate new random reading
reading = {time: new Date(), hr: random()};
// Push the new reading onto readings and currentReadings
readings.push(reading);
currentReadings.push(reading);
// Remove readings not within graph period
for (var i=0; i<currentReadings.length; i++) {
if (now - currentReadings[i].time > 60000)
currentReadings.shift();
else
break;
}
// Redraw the line.
d3.select(this)
.datum(currentReadings)
.attr("d", line)
.attr("transform", null);
// Slide it to the left.
d3.active(this)
.attr("transform", "translate(" + xScale(0) + ",0)")
.transition()
.duration(duration)
.on("start", tick);
}
</script>关键问题是您翻译的图形过多。它正在绘制，只是远处看不到。为什么？
d3.active(this)
.attr("transform", "translate(" + xScale(0) + ",0)")
.transition()
.duration(duration)
.on("start", tick);
您正在通过xScale（0）进行翻译，这是一个非常高的负数：
var now = new Date();
var xScale = d3.scaleTime()
.domain([now - 60000, now])
.range([0, 100]);
console.log(xScale(0));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>因此，您永远都看不到图表，它在左边。相反，您可以通过坐标之间x值的差异进行转换（每秒更新一次，并在整个宽度上显示60个值，可能是：）width/60。如果输入点不一致，则需要按输入点之间的宽度差进行平移，以便将图形滚动适当的数量。
下面的代码段假设您的图表假设输入数据的速率恒定（我还对x轴应用了过渡，因此它可以滚动并且不会跳转）：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: blue;
stroke-width: 2px;
}
</style>
<svg width="600" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var n = 40,
random = d3.randomUniform(0, 1),
readings = [],
currentReadings = [],
duration = 1000,
now = new Date(Date.now() - duration);
startTime = new Date();
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scaleTime()
.domain([now - 60000, now])
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
var line = d3.line()
.x(function(data) { return xScale(data.time); })
.y(function(data) { return yScale(data.hr); })
.curve(d3.curveBasis);
g.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var xAxisGroup = g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis = d3.axisBottom(xScale).
ticks(3));
var yAxisGroup = g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
var path = g.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(currentReadings)
.attr("class", "line")
.transition()
.duration(1000)
.ease(d3.easeLinear)
.on("start", tick);
function tick() {
now = new Date();
// update the x axis domain and slide left
xScale.domain([now - 60000, now]);
// transition the axis:
xAxisGroup.transition().duration(1000).ease(d3.easeLinear).call(xAxis);
// generate new random reading
reading = {time: new Date(), hr: random()};
// Push the new reading onto readings and currentReadings
readings.push(reading);
currentReadings.push(reading);
// Remove readings not within graph period
for (var i=0; i<currentReadings.length; i++) {
if (now - currentReadings[i].time > 60000)
currentReadings.shift();
else
break;
}
// Redraw the line.
d3.select(this)
.datum(currentReadings)
.attr("d", line(currentReadings))
.attr("transform", null);
// Slide it to the left.
d3.active(this)
.attr("transform", "translate(" + -width/60 + ",0)") // transition based on distance between each data point.
.transition()
.duration(duration)
.on("start", tick);
}
</script>图表的主要部分的跳跃性与缓动有关，一旦产生下一个点，便对缓动进行修正
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句