javascript - 为什么放大补间线时会丢失点？

Question

我正在尝试在 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); };
}

Answer 1

当你放大你的路径时，你的路径会变得非常大，设置一个 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);
}