gpt4 book ai didi

d3.js - 使用d3 js中的对角线函数在两点之间绘制曲线

转载 作者:行者123 更新时间:2023-12-04 17:33:22 36 4
gpt4 key购买 nike

我从 d3js 开始并尝试自己制作图表。
我试图在两点之间画一条曲线。

function CreateEdge(nodeId1,nodeId2,edgeLabel)
{

var curveData = [ { "x": 190, "y": 100}, { "x": 260, "y": 50} ];
var edge = d3.select("svg").append('g');

//diagonal function that can draw a curve goes in here

var curve = edge.append("path")
.attr("d", diagonal)
.attr("stroke", "#444")
.attr("stroke-width", 2)
.attr("fill", "none");

}

当我进行研究时,我发现了一些使用对角函数绘制曲线的示例。喜欢 this

有没有办法使用对角线在两个已知点之间绘制一条简单的曲线?或者是否有一些替代方法?

最佳答案

你可以这样做:

var curveData = [{ x: 190, y: 100 }, { x: 360, y: 150 }];
var edge = d3.select('svg').append('g');
var diagonal = d3.svg.diagonal()
.source(function (d) { return { x: d[0].y, y: d[0].x }; })
.target(function (d) { return { x: d[1].y, y: d[1].x }; })
.projection(function (d) { return [d.y, d.x]; });

d3.select('g')
.datum(curveData)
.append('path')
.attr('class', 'link')
.attr('d', diagonal)
.attr('stroke', '#444')
.attr('stroke-width', 2)
.attr('fill', 'none');
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
</head>
<body>
<svg width=500 height=500></svg>
</body>
</html>

关于d3.js - 使用d3 js中的对角线函数在两点之间绘制曲线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34558943/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com