在d3 Sunburst中删除弧之间的填充

时间:2015-05-01 15:41:06

标签: javascript css d3.js visualization sunburst-diagram

我正在尝试使用d3.js开发一个sunburst图,但是想要删除弧之间的填充。我不想将它们合并为一个项目,因为我需要能够深入到它们中,而我希望从它们的兄弟弧中获得不可见的分隔符。我修改了Mike开发的原始图像,你可以在下面找到它。

enter image description here 在图的右半部分,我已经摆脱了填充,因为我想要编程,左边的一半你仍然可以看到我正在谈论的填充。

我复制了Mike Bostocks的代码,但无法找到有关填充的任何内容。有没有办法通过增加固定量的弧的大小来做到这一点?

由于

1 个答案:

答案 0 :(得分:1)

通过在d3中进行默认设置,每个圆弧之间都有一个狭窄的填充区,这似乎是水平线错误和垂直线错误。您可以通过将圆弧的每个 sweep-flag 值设置为来修复垂直线错误通过编辑脚本<script src="http://d3js.org/d3.v3.min.js"></script>

    arc: function (t, n, e, r, i, o) {
            t = +t, n = +n;
            var u = (e = +e) * Math.cos(r),
                a = e * Math.sin(r),
                c = t + u,
                s = n + a,
                f = 0,
                l = o ? r - i : i - r;
            if (e < 0) throw new Error("negative radius: " + e);
            null === this._x1 ? this._ += "M" + c + "," + s : (Math.abs(this._x1 - c) > 1e-6 || Math.abs(this._y1 - s) > 1e-6) && (this._ += "L" + c + "," + s), e && (l < 0 && (l = l % mh + mh), l > xh ? this._ += "A" + e + "," + e + ",0,1," + f + "," + (t - u) + "," + (n - a) + "A" + e + "," + e + ",0,1," + f + "," + (this._x1 = c) + "," + (this._y1 = s) : l > 1e-6 && (this._ += "A" + e + "," + e + ",0," + +(l >= yh) + "," + f + "," + (this._x1 = t + e * Math.cos(i)) + "," + (this._y1 = n + e * Math.sin(i))))
        }