0

这些路径之间有一条线；为什么？

（在我的机器上看起来像这样在此处输入图像描述：）

path.myshape {
  stroke: gray;
  fill: gray;
  stroke-opacity:0.5;
  fill-opacity:0.5;
}
<svg width="120px" height="120px" viewBox="0 0 120 120">
  <path class="myshape" d="M0 0 L100 100 L100 0" />
  <path class="myshape" d="M0 0 L100 100 L0 100" />
</svg>

stroke即使没有（很难看到，但它仍然存在），也会发生类似的问题。我很困惑为什么会这样；如果我有两个三角形是正方形的一半，为什么我不只看到一个正方形？有没有办法防止这种情况？

（在我的机器上看起来像这样在此处输入图像描述：）

path.myshape {
  stroke: none;
  fill: gray;
  fill-opacity:0.5;
}
<svg width="120px" height="120px" viewBox="0 0 120 120">
  <path class="myshape" d="M0 0 L100 100 L100 0" />
  <path class="myshape" d="M0 0 L100 100 L0 100" />
</svg>

更现实的例子（我试图摆脱具有几乎相同填充/描边属性的三角形之间的线条）：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
// add the graph canvas to the body of the webpage
var svg = d3.select("div#plot1").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
var axis = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var xsc = d3.scaleLinear()
          .domain([-2, 2])  // the range of the values to plot
          .range([ 0, width ]);        // the pixel range of the x-axis

var ysc = d3.scaleLinear()
          .domain([-2, 2])
          .range([ height, 0 ]);
var closedLine = d3.line()
   .x(function(d){ return xsc(d[0]); })
   .y(function(d){ return ysc(d[1]); })
   .curve(d3.curveLinearClosed);

function attrfunc(f,attr) {
  return function(d) {
    return f(d[attr]);
  };
}


function doit(data)
{
  var items = axis.selectAll("path.item")
    .data(data);
  items.enter()
      .append("path")
        .attr("class", "item")
      .merge(items)
        .attr("d", attrfunc(closedLine, "xy"))
        .attr("stroke", "gray")
        .attr("stroke-width", 1)
        .attr("stroke-opacity", function(d) { return 1-d.age;})
        .attr("fill", "gray")
        .attr("fill-opacity", function(d) {return 1-d.age;});
  items.exit().remove();
}

var state = {
  t: 0,
  theta: 0,
  omega: 0.5,
  A: 1.0,
  N: 60,
  history: []
}
d3.timer(function(elapsed)
{
  var S = state;
  if (S.history.length > S.N)
    S.history.shift();
  var dt = Math.min(0.1, elapsed*1e-3);
  S.t += dt;
  S.theta += S.omega * dt;
  var sample = {
    t: S.t,
    x: S.A*(Math.cos(S.theta)+0.1*Math.cos(6*S.theta)),
    y: S.A*(Math.sin(S.theta)+0.1*Math.sin(6*S.theta))
  }
  S.history.push(sample);

  // Create triangular regions
  var data = [];
  for (var k = 0; k < S.history.length-1; ++k)
  {
     var pt1 = S.history[k];
     var pt2 = S.history[k+1];
		 data.push({age: (S.history.length-1-k)/S.N,
                xy:
                 [[0,0],
                  [pt1.x,pt1.y],
                  [pt2.x,pt2.y]]
               });
  }
  doit(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<div id="plot1">
</div>

4

0 回答 0