当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《使用d3js中的对角函数绘制两点之间的曲线》经验,为你挑选了1个好方法。

我从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");

    }

当我做我的研究时,我发现了一些使用对角函数绘制曲线的例子.像这样

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



1> Cyril Cheria..:

你可以这样做:

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');


  
    
  
  
    
  
推荐阅读
Life一切安好
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有