css - SVG 中的厚贝塞尔曲线没有伪影

Question

我试着画粗Bezier lines (对于自定义 Sankey diagram )。我用 SVG Paths ，贝塞尔曲线的形式为 C x1 y1, x2 y2, x y。我使用 stroke 而不是 fill，因此它们具有恒定的宽度(并且可以表示流)。

如果线条很细或垂直​​差异相对较低，则效果很好。但是，如果它们很厚，我会得到一些令人讨厌的伪影(看起来像 Angular )- 请参见下图中右下角的曲线:

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

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

• 确保x1左边或x右边没有东西，
• 左右实际宽度是否匹配stroke-width?

Answer 1

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

为此，您必须在 BezierCurveTo 的末尾创建一个 lineTo(0, strokeWidth)，然后在另一个中重新绘制 bezierCurve方式:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="chart"></svg>

因为这里有一个值(value)超过 10000 字的动画，它展示了正在发生的事情以及为什么不能将其称为浏览器错误:

@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;
  }

<svg height="200" width="200" id="chart" viewBox="290 260 100 100">
<path id="dashed" style="fill: none; stroke: rgb(31, 119, 180); stroke-width: 50; stroke-dasharray: 3, 3;" d="M300,300c10,0 30,40 40,40"></path>
<path style="fill: none; stroke: black;" d="M300,300c10,0 30,40 40,40">
</path></svg>