时间戳

首页 > 解决方案 > d3.js 图表中的错误行

javascript - d3.js 图表中的错误行

问题描述

我不知道为什么我在 d3.js 图表中有一些错误的行。我不确定这是编码问题，因为如果我尝试更改 Chrome 上的选项卡然后返回图表的选项卡，错误的行就会消失。

很难理解是什么问题，都'添加图像更好地解释。

错误的图表

这是更新图表的 javascript 代码（我正在使用 Vue.js）

           const line = d3.line()
                            .x((_d,i) => this.xScale(this.zoom* i))
                            .y(d => this.yScale(d))
                            .curve(d3.curveBasis);
            
            this.svg.select('#g-path').select('path')
            .attr('d', line(this.data))
            
            .style("stroke-linejoin", "round")
            .style('fill', 'none')
            .style('stroke', 'green')
            .style('stroke-width', 1);

编辑：如果我单击页面中的另一个组件，线条也会消失。

谢谢！

标签： javascriptvue.jssvgd3.jscharts

解决方案

我怀疑这可能是斜接的问题

当两条线段以锐角相交并且已为 stroke-linejoin 指定斜接时，斜接可能会延伸到远远超出描边路径的线的厚度。stroke-miterlimit 比率用于定义何时超过限制，如果超过，则连接将从斜接转换为斜角。
源代码

虽然圆线连接不应该导致问题，但当线非常接近时可能会出现一些计算错误。

您可以尝试斜接线连接，以防止线条延伸。

  .style("stroke-linejoin", "miter")
  .style("miter-clip", "1")

推荐阅读