SVG中的厚Bezier曲线没有伪影

我尝试绘制厚Bezier线(用于自定义Sankey图).我使用SVG路径,以贝塞尔曲线的形式C x1 y1, x2 y2, x y.我使用stroke而不是fill,因此它们具有恒定的宽度(并且可以表示流).

如果线条很薄或垂直差异相对较小,它的效果非常好.然而,如果它们非常厚,我会得到一些讨厌的文物(看起来像角) - 请参见下图中的右下曲线:

资料来源:http://jsfiddle.net/stared/83jr5fub/

有没有办法避免伪影,即:

确保左侧x1或右侧没有任何东西x,

左右实际宽度匹配stroke-width？

Kaiido.. 8

我认为在你的情况下(使用给定的路径),他的最佳解决方案是关闭路径,并使用其填充属性.

要做到这一点,你必须做出lineTo(0, strokeWidth)你的结束BezierCurveTo,然后重新绘制贝兹曲线中的其他方式:

var svg = d3.select("#chart");

var data = [
	{t: 5, dy: 10},
	{t: 5, dy: 20},
	{t: 5, dy: 40},
	{t: 20, dy: 10},
	{t: 20, dy: 20},
	{t: 20, dy: 40},
	{t: 50, dy: 10},
	{t: 50, dy: 20},
	{t: 50, dy: 40},
];

var ctrl = 10;
var dx = 40;
var spacing = 100;
var colors = d3.scale.category10();

svg
  .attr("width", 4 * spacing)
  .attr("height", 4 * spacing);

svg.selectAll("path")
  .data(data)
  .enter()
  	.append("path")
    .attr("d", function (d, i) {
      var x1 = spacing + spacing * (i % 3);
      var y1 = spacing + spacing * Math.floor(i / 3);
      return "M" + x1 + "," + y1 +
      "c" + ctrl + "," + 0 +
      " " + (dx - ctrl) + "," + d.dy +
      " " + dx + "," + d.dy +
      // move down for the wanted width
      "l" + (0) + "," + (d.t) +
      // negate all values
      "c" + (ctrl * -1) + "," + 0 +
      " " + ((dx - ctrl) * -1) + "," + (d.dy * -1) +
      " " + (dx * -1) + "," + (d.dy * -1);
  })
  .style("fill", colors(0))

@keyframes dash {
  from {
     stroke-dashoffset: -10%;
  }
   to {
     stroke-dashoffset: 90%;
  }
 }
@-webkit-keyframes dash {
  from {
     stroke-dashoffset: -10%;
  }
   to {
     stroke-dashoffset: 90%;
  }
 }
#dashed{
  animation : dash 12s linear infinite;
  }

var svg = d3.select("#chart");

var data = [
	{t: 5, dy: 10},
	{t: 5, dy: 20},
	{t: 5, dy: 40},
	{t: 20, dy: 10},
	{t: 20, dy: 20},
	{t: 20, dy: 40},
	{t: 50, dy: 10},
	{t: 50, dy: 20},
	{t: 50, dy: 40},
];

var ctrl = 10;
var dx = 40;
var spacing = 100;
var colors = d3.scale.category10();

svg
  .attr("width", 4 * spacing)
  .attr("height", 4 * spacing);

svg.selectAll("path")
  .data(data)
  .enter()
  	.append("path")
    .attr("d", function (d, i) {
      var x1 = spacing + spacing * (i % 3);
      var y1 = spacing + spacing * Math.floor(i / 3);
      return "M" + x1 + "," + y1 +
      "c" + ctrl + "," + 0 +
      " " + (dx - ctrl) + "," + d.dy +
      " " + dx + "," + d.dy +
      // move down for the wanted width
      "l" + (0) + "," + (d.t) +
      // negate all values
      "c" + (ctrl * -1) + "," + 0 +
      " " + ((dx - ctrl) * -1) + "," + (d.dy * -1) +
      " " + (dx * -1) + "," + (d.dy * -1);
  })
  .style("fill", colors(0))