enter image description here The red box area is the part that annoys me, that's the start and end point of the path, but it doesn't have a curve effect

我的代码很简单:

const svg = d3.select("svg");
        let data = [[1, 3], [2, 4], [3, 4], [5, 6], [6, 5], [7, 3], [6, 1], [4, 2], [2, 2], [1, 3]]
        let datax = data.map(v => v[0])
        let datay = data.map(v => v[1])

        let scale_x = d3.scaleLinear()
            .domain([d3.min(datax), d3.max(datax)])
            .range([0, 960])
        let scale_y = d3.scaleLinear()
            .domain([d3.min(datay), d3.max(datay)])
            .range([500, 0])

        let curve_generator = d3.line()
            .x((d) => scale_x(d[0]))
            .y((d) => scale_y(d[1]))
            .curve(d3.curveBasis)

        svg.append('path')
            .attr('d', curve_generator(data))
            .attr('stroke', 'gray')
            .attr('stroke-width', 2)
            .attr('fill', 'none')

推荐答案

在我看来,在您的数据中,最后一个点与第一个点处于相同的位置,只是简单地"关闭"了路径.如果是这样,只需删除最后一个点并使用d3.curveBasisClosed,这样D3将为您关闭路径:

const svg = d3.select("svg");
let data = [
  [1, 3],
  [2, 4],
  [3, 4],
  [5, 6],
  [6, 5],
  [7, 3],
  [6, 1],
  [4, 2],
  [2, 2]
]
let datax = data.map(v => v[0])
let datay = data.map(v => v[1])

let scale_x = d3.scaleLinear()
  .domain([d3.min(datax), d3.max(datax)])
  .range([0, 300])
let scale_y = d3.scaleLinear()
  .domain([d3.min(datay), d3.max(datay)])
  .range([150, 0])

let curve_generator = d3.line()
  .x((d) => scale_x(d[0]))
  .y((d) => scale_y(d[1]))
  .curve(d3.curveBasisClosed)

svg.append('path')
  .attr('d', curve_generator(data))
  .attr('stroke', 'gray')
  .attr('stroke-width', 2)
  .attr('fill', 'none')
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>

Javascript相关问答推荐

MathJax可以导入本地HTML文档使用的JS文件吗?

使用Promise.All并发解决时,每个promise 的线性时间增加?

使用POST请求时,Req.Body为空

如何将数据块添加到d3力有向图中?

在VS代码上一次设置多个变量格式

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

使用Reaction窗体挂钩注册日历组件

用于测试其方法和构造函数的导出/导入类

如何在Reaction中清除输入字段

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

$GTE的mongoose 问题

计算对象数组中属性的滚动增量

通过ng-绑定-html使用插入的HTML中的函数

Playwright:ReferenceError:browserContext未定义

如何在不获取其子元素的文本内容的情况下获取元素的文本内容?

为什么我的Reaction组件不能使用createBrowserRouter呈现?

如何使用属性访问器定义循环的for...的局部变量

在继续循环之前,请等待带有异步调用的函数完成

如何在应用内Chromium浏览器中启用通知模块?(未捕获ReferenceError:未定义通知)

如何使jQuery终端光标成为块,而不是下划线?