Question

我是D3和Javascript的新手，我试图弄清楚为什么这段代码不起作用。错误似乎在最后一个匿名函数中。用a替换它

有什么建议吗？

var pi = Math.PI;
var cornerRadius = 20;
var spaceAngle = 10

var percents = [40, 60, 76]

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

function deriveArcs(angle, i) {
    var arc = d3.svg.arc()
        .innerRadius(180 + i * spaceAngle)
        .outerRadius(240 + i * spaceAngle)
        .cornerRadius(cornerRadius)
        .startAngle(-pi * 0.5)
        .endAngle(-pi * 0.5 + angle / 100 * pi);
    return arc;
}

var a = deriveArcs(30, 0)

g.selectAll("path")
    .data(percents)
    .enter()
    .append("path")
    .attr("d",
        function(d, i) {
            console.log(d+" "+i)
            var aa = deriveArcs(d, i);
            return aa;
        }
    );

chrome中的错误：

d3.min.js：1错误：属性d：预期的moveto path命令（'M'或'm'），“function n（）{var ...”。 a @ d3.min.js：1 （匿名）@ d3.min.js：3 是@d3.min.js：1 Aa.each @ d3.min.js：3 Aa.attr @ d3.min.js：3 （匿名）@ pie.js：30 pie.js：32 60 1

Answer 1

在derivedArcs功能中，执行此操作时：

return arc;

您只是返回弧生成器函数本身，而不是它的值。

话虽如此，它应该是：

return arc();

执行弧生成器功能并返回正确的路径。

以下是仅包含此更改的代码：

var pi = Math.PI;
var cornerRadius = 20;
var spaceAngle = 10

var percents = [40, 60, 76]

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height"),
  g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


function deriveArcs(angle, i) {
  var arc = d3.svg.arc()
    .innerRadius(180 + i * spaceAngle)
    .outerRadius(240 + i * spaceAngle)
    .cornerRadius(cornerRadius)
    .startAngle(-pi * 0.5)
    .endAngle(-pi * 0.5 + angle / 100 * pi);
  return arc();
}

var a = deriveArcs(30, 0)

g.selectAll("path")
  .data(percents)
  .enter()
  .append("path")
  .attr("d",
    function(d, i) {
      return deriveArcs(d, i);
    }
  );

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="500"></svg>

Answer 2

我也遇到了这个问题。为了以防万一，出于同样的原因，其他人来到这里，试试这个。

d3.svg.arc（）;

d3弧创建不使用数据绑定

2 个答案: