我从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"); }
当我做我的研究时,我发现了一些使用对角函数绘制曲线的例子.像这样
有没有办法用对角线绘制两个已知点之间的简单曲线?还是有一些替代方法?
你可以这样做:
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');