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

【问题标题】：Draw curve between two points using diagonal function in d3 js使用d3 js中的对角函数在两点之间绘制曲线
【发布时间】：2016-01-01 18:42:57
【问题描述】：

我从 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

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

【问题讨论】：

为什么不直接使用 d3.svg.line() 路径生成器？看看对角线是如何定义的：bl.ocks.org/mbostock/4063570

标签： d3.js

【解决方案1】：

你可以这样做：

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>

【讨论】：