logo标签列表

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

d3.js
6

我正在学习使用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");

    }

在我的研究中，我发现一些使用对角线函数绘制曲线的例子。例如这个

是否有一种方法可以使用对角线函数在两个已知点之间绘制简单的曲线？或者是否有其他替代方法？

为什么不直接使用d3.svg.line()路径生成器？看看如何定义对角线：http://bl.ocks.org/mbostock/4063570 - Union find
1个回答
10

你可以像这样做：

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接