Question

我想绘制一系列共有一个共同中心点的圆圈，每个圆圈的路径都应该是虚线。我已经尝试过画布或svg，如下所示

＆＃13;

// svg.datum(d3.range(40)).enter().append('g')
var w = window.innerWidth,
    h = window.innerHeight;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

// svg.append("rect")
//     .attr("width", w)
//     .attr("height", h);
var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

svg.append("g").selectAll("circle")
    .data(d3.range(35,60))
    // .data([25])
  .enter().append("circle")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    // .attr("transform", "rotate(-10," + w / 2 + "," + h / 2 + ")" )
    .attr("stroke-dasharray", "5%")                                        
    // .attr("stroke-dashoffset", "15")                                        
    .attr("r", function(d) { return d * 5; });

svg.append("g").selectAll("circle")
    .data(d3.range(25,35))
  .enter().append("circle")
    .attr("stroke-dasharray", "10")                                        
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .attr("class", "salmon")                                        
    .attr("r", function(d) { return d * 5; });

＆＃13;

body{
	/*background: salmon;*/
	/*color: #fff;*/
	padding: 0;
	margin: 0;
}

canvas{
	/*background: #ccc;*/
}

svg{
	/*background: rgba(46,139,87,0.5);*/
	background: #fff;
}

rect {
  fill: none;
  pointer-events: all;
}

circle {
  fill: none;
  stroke: rgba(46,139,87,0.5);
}

.salmon{
	stroke: salmon;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/fanyer/kcwL3vwc/

一条白线，由一系列圆圈按比例放大，位于基线下面的开放区域之间，首先是它的平局。

有没有解决方法来消除不均匀的？

Answer 1

它开始从某个位置开始绘制是真的。

对于svg，其reference表示其开始时间为3点钟。

对于canvas，它的reference，它的2d上下文从12点开始。

Answer 2

我是提问者。我在mdn和msdn中查找了svg和webgl，除了directX文档之外还有opengl b。似乎它必须确定绘制图形的基线。因此，在很多场合下都没有问题，只有一个或多个。

这是一系列虚线图形，它们彼此成比例。这将把人们可以看到的程度的坏事炸毁。即使有一条曲线，问题也存在并且无法感受到。一个典型的例子是许多笔划虚线圆圈共享相同的中心点。

在我的观点中，它应该等于计算机或系统图形库无法找出真正的分数但是十进制表示的问题

具有stroke-dasharray的系列cicles是不常见的，无论是帆布还是svg

2 个答案: