插值线以在 d3 中制作半圆/圆弧答案

【问题标题】：Interpolate line to make a half-circle/arc in d3插值线以在 d3 中制作半圆/圆弧
【发布时间】：2012-06-30 13:45:18
【问题描述】：

我正在尝试在 d3 中创建一个半圆。使用cardinal interpolation 会产生一条接近我想要的路径，但不够“循环”。如何编写自己的插值器来更好地绕过这条路径，或者有更好的方法吗？

这是我目前所拥有的：http://jsfiddle.net/Wexcode/jEfsh/

<svg width="300" height="500">
    <g id="g-1"></g>
    <g id="g-2"></g>
</svg>

JS：

var curved = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("cardinal")
    .tension(0);
var straight = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear")
    .tension(0);

var points = [{x: 70, y: 52.5}, {x: 250, y: 250}, {x: 70, y: 447.5}];

d3.select("#g-1").append("path").attr("d", curved(points));

d3.select("#g-2").append("path").attr("d", straight(points));

【问题讨论】：

标签： svg d3.js

【解决方案1】：

你看过arc section吗？

【讨论】：

这最终成为我决定使用的。如果可能的话，我想我仍然想知道如何使用自定义插值器来执行此操作。
使用 d3.arc() 创建曲线的问题在于，它将两条线叠加在一起。见：stackoverflow.com/a/11595157/522877
有道理。喜欢这个例子以及你对stroke-dasharray 所做的事情

【解决方案2】：

见：How to calculate the SVG Path for an arc (of a circle)

使用 d3.arc() 创建曲线的问题在于，它将两条线叠加在一起。见：https://stackoverflow.com/a/11595157/522877

d3.svg.line.radial() 在创建圆弧和圆时拥有更多的控制权。

以下是如何创建圆圈的示例：http://jsfiddle.net/Wexcode/CrDUy/

var radius = 100,
    padding = 10,
    radians = 2 * Math.PI;

var dimension = (2 * radius) + (2 * padding),
    points = 50;

var angle = d3.scale.linear()
    .domain([0, points-1])
    .range([0, radians]);

var line = d3.svg.line.radial()
    .interpolate("basis")
    .tension(0)
    .radius(radius)
    .angle(function(d, i) { return angle(i); });

var svg = d3.select("body").append("svg")
    .attr("width", dimension)
    .attr("height", dimension)
.append("g");

svg.append("path").datum(d3.range(points))
    .attr("class", "line")
    .attr("d", line)
    .attr("transform", "translate(" + (radius + padding) + ", " + (radius + padding) + ")");

【讨论】：