3

我尝试创建一个动态旭日图，它会缩放选定的弧线并隐藏其他弧线。只要我避免使用值大于 0 的 arc.cornerRadius()，这效果很好。

我在 (attrTween) arcTween 函数中记录了生成的弧，并且输出对我来说似乎是正确的，但是以下 svg 路径不同，其中第二个导致 d3.min.js:5 中的错误。

正确路径：

M0,58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,-58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,58.528989440000004M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z

错误路径：

M0,55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,-55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,55.73917966222222M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z

这就是我设置半径的方式：

    var graphMaxRadius = 83;
    var innerBtnRadius = 55;
    var arc = d3.svg.arc()
                .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x))); })
                .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x + d.dx))); })
                .innerRadius(function(d) { return Math.max(innerBtnRadius, yScale(d.y)); })
                .outerRadius(function(d) { return Math.max(0, Math.min(yScale(d.y + d.dy), graphMaxRadius)); })
                .cornerRadius(function(d) { return 10;});

我的第一个猜测是，cornerRadius 与隐藏弧冲突并且发生了无效的 svg，所以我尝试了各种尺寸。但是一切 > 0 都会导致错误，输出为：

    M0,55A55,55 0 1,1 0,-55A55,55 0 1,1 0,55M0,50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,-50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,50.006635519999996Z
    d3.min.js:5 Error: Invalid value for <path> attribute d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNLNaN,NaNANaN,NaN 0 0,1 NaN,NaNZ"
d3.min.js:5 (anonymous function)
d3.min.js:3 l
d3.min.js:1 Lt
d3.min.js:1 qt

这是我的 arcTween 函数（在github issue上与 mbostok 对应编辑）：

return function arcTween(d) {
        var xd = d3.interpolate(xScale.domain(), [d.x, d.x + d.dx]);
        var yd = d3.interpolate(yScale.domain(), [d.y, d.y + d.dy]);

        var selectionRadius = innerBtnRadius - 5;
        //radius -5 reduces width of inner circle and selection rim
        var yr = d3.interpolate(yScale.range(), [d.y ? selectionRadius : innerBtnRadius, radius-5]);

        return function(d, i) {
            return i
                ? function(t) { return arc(d); }
                : function(t) { xScale.domain(xd(t)); yScale.domain(yd(t)).range(yr(t)); return arc(d); };
        };
    }

请问有什么想法，接下来我可以检查什么？

ps sry，没有 jsfiddle，因为他们目前没有安装 d3 v3.5（我缺少数据导入）。我的代码与此处的示例类似：zoomable sunburst

这是 d3.js 库中发生错误的断点的屏幕截图，但我仍然不知道：

这是 d3.js 中发生错误的地方

4

1 回答 1

4

请记住，cornerRadius 是 D3 分区布局中相对较新的功能，因此可能仍然存在一些与之相关的错误。

但是，我的印象是您的问题不存在。

根据您链接到的示例，我创建了一个小型codepen。

它与示例相同，只是它使用较小的数据集，并将数据保存在脚本本身中，而不是保存在 JSON 文件中。

此外，我集成了cornerRadius，检查了各种值 - 一切都像魅力一样，如下图所示。

我无法集成您的补间函数，因为其余代码中缺少一些位和和平。

因此，看起来您需要检查和重写您的代码，尤其是与 arcTween() 相关的任何内容。

在我的示例中说明有效执行的屏幕截图：

cornerRadius是 5：

在此处输入图像描述

cornerRadius是 20：

在此处输入图像描述

cornerRadius是 100：

在此处输入图像描述

于 2015-01-08T15:52:30.870 回答