相关疑难解决方法(0)

如何在D3.js中从起点到终点平滑地绘制路径

我有以下代码,它基于正弦函数绘制线路径:

var data = d3.range(40).map(function(i) {
  return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
});

var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0]);


var line = d3.svg.line()
          .interpolate('linear')
          .x(function(d){ return x(d.x) })
          .y(function(d){ return y(d.y) });

var svg = d3.select("body").append("svg")
    .datum(data)
    .attr("width", …
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

16
推荐指数
1
解决办法
2万
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1