javascript - D3非圆弧

Question

我希望使用 d3js v3 在 HTML 中使用 SVG 创建非圆弧。我的问题是，我能够创建的非圆弧实际上是经过变换的圆弧。结果，圆弧的笔划宽度不均匀并且看起来很尴尬。这是jsFiddle example :

var vis = d3.select("body").append("svg")    
vis.attr("width", "100%")
    .attr("height", "100%")
    .append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(500)
        .outerRadius(500)
        .startAngle(-90 * (Math.PI / 180))
        .endAngle(90 * (Math.PI / 180)))
    .attr("stroke", "black")
    .attr("transform", "translate(510,170) scale(1,0.3)")
    .attr("stroke-width", 14);

以下是结果示例:

弧线应如下所示(在 Viso 中绘制):

有谁知道创建非圆形 SVG 弧(意味着半径变化)的方法吗？

Answer 1

您可以创建一个简单的折线图并使用d3.curveBasis或您喜欢的任何其他插值。使用数据以获得所需的结果。

这是片段:

var margin = {
  top: 30,
  right: 20,
  bottom: 30,
  left: 50
};
var width = 550 - margin.left - margin.right;
var height = 150 - margin.top - margin.bottom;


var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var valueline = d3.line()
  .x(function(d) {
    return x(d.x);
  })
  .y(function(d) {
    return y(d.y);
  }).curve(d3.curveBasis);

var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [{
  x: 1,
  y: "0"
}, {
  x: 1.05,
  y: "0.6"
}, {
  x: 3,
  y: "1.3"
}, {
  x: 4.95,
  y: "0.6"
}, {
  x: 5,
  y: "0"
}];

data.forEach(function(d) {
  d.x = d.x
  d.y = +d.y;
});


x.domain(d3.extent(data, function(d) {
  return d.x;
}));
y.domain([0, d3.max(data, function(d) {
  return d.y;
})]);

svg.append("path")
  .attr("d", valueline(data));

path {
  stroke: black;
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  shape-rendering: geometricprecision;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>