javascript - 为什么在补间线上放大时会丢失点?
问题描述
我正在尝试在 d3.js 中制作一个两线图。我只在一个轴上添加了缩放。一旦我添加了过渡(补间),缩放就有点奇怪了。如果我放大得足够多,某些点将会丢失。补间关闭时不会发生这种情况。当点数更多时,错误行为更加突出。继续放大并在这里尝试:https ://jsfiddle.net/cvm43f5y/
让我知道我做错了什么。谢谢你。
let d3svg = d3.select("body").append("svg")
.attr("height", "500")
.attr("width", "500");
d3svg.selectAll("g").remove();
data1 = [
{"time": 0.1, "value":12},
{"time": 0.2, "value":15},
{"time": 0.3, "value":16},
{"time": 0.4, "value":18},
{"time": 0.5, "value":11},
{"time": 0.6, "value":13},
{"time": 0.7, "value":21},
{"time": 0.8, "value":20},
]
data2 = [
{"time": 0.9, "value":8},
{"time": 1.0, "value":9},
{"time": 1.2, "value":7},
{"time": 1.3, "value":8},
{"time": 1.4, "value":9},
{"time": 1.5, "value":12},
{"time": 1.6, "value":11},
{"time": 1.7, "value":6},
]
var margin = {
top: 20,
right: 20,
bottom: 50,
left: 60
};
var width = +d3svg.attr('width') - margin.left - margin.right;
var height = +d3svg.attr('height') - margin.top - margin.bottom;
var xScale = d3.scaleLinear().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);
var line = d3.line()
.x(function(d) {
return xScale(d.time)
})
.y(function(d) {
return yScale(d.value)
});
let timeMax = d3.max(data2, d => d.time);
xScale.domain([0, timeMax]);
yScale.domain(d3.extent(data1, function(d) {
return d.value;
}));
var g = d3svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var xAxis = d3.axisBottom(xScale)
.ticks(5)
g.append('g')
.attr('class', 'axis axis-x')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
var yAxis = d3.axisLeft(yScale)
.tickFormat(d3.format('.4f'));
g.append('g')
.attr('class', 'axis axis-y')
.call(yAxis);
g.append('path')
.datum(data1)
.attr('fill', 'none')
.attr('class', 'line line-media')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr("stroke", "#16a085")
//.attr('d', line);
g.selectAll("path.line-media").datum(data1).attr('d', line).call(transition)
g.append('path')
.datum(data2)
.attr('fill', 'none')
.attr('class', 'line line-drug')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr("stroke", "#2e4053")
//.attr('d', line);
g.selectAll("path.line-drug").datum(data2).attr('d', line).call(transition)
let zoom = d3.zoom();
zoom.on("zoom", function(){
let newYScale = d3.event.transform.rescaleY(yScale)
yAxis.scale(newYScale);
d3.select(".axis-y").call(yAxis);
line = d3.line()
.x(function(d) {
return xScale(d.time)
})
.y(function(d) {
return newYScale(d.value)
});
g.selectAll("path.line").attr("d", line);
})
d3svg.call(zoom);
function transition(path) {
path.transition()
.duration(1000)
.attrTween("stroke-dasharray", tweenDash);
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) { return i(t); };
}
解决方案
当您放大您的路径时,您的路径会变得非常大,并且设置了一个stroke-dasharray
方法,它会变得虚线。
stroke-dasharray
解决方案在过渡结束时删除。
function transition(path) {
path.transition()
.duration(1000)
.attrTween("stroke-dasharray", tweenDash)
.on("end", function () { d3.select(this).attr("stroke-dasharray", null); });
}
您可以将transition
调用直接添加到path
构造中
g.append('path')
.datum(data1)
.attr('fill', 'none')
.attr('class', 'line line-media')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr("stroke", "#16a085")
.attr('d', line)
.call(transition);
简化tweenDash
function tweenDash() {
var l = this.getTotalLength();
return d3.interpolateString("0," + l, l + "," + l);
}
推荐阅读
- android - 程序类型已经存在:android.support.customtabs.ICustomTabsCallback$Stub$Proxy
- javascript - 我应该如何正确调用 NuxtServerInit?
- android - 来自 koin 的 SharedViewModel 不能与 MapFragment 一起使用
- node.js - 本地主机到带有转发节点 js 的 Live Server
- python - 如何让 Pygame 打开图像
- python-3.x - 解决循环python中的陈旧元素
- python - 我可以使用 XGBoost 来提升其他模型(例如朴素贝叶斯、随机森林)吗?
- azure - WCF 不会终止对客户端的调用
- css - 创建一个带有 n*n 个正方形的 CSS 网格
- python - 导入后任意修改导入一个python模块