Question

我使用d3.js创建了一个相同大小的圆圈，但现在我想为它添加不同的标签。以下是我的代码

var data = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];

var r = 200;

var color = d3.scale.ordinal()
        .range(['red', 'green', 'blue']);

var canvas = d3.select('body').append('svg')
                .attr('width', 500)
                .attr('height', 500);

var group = canvas.append('g')
                .attr('transform', 'translate(300, 300)');

var arc = d3.svg.arc()
        .innerRadius(r - 30)
        .outerRadius(r);

var pie = d3.layout.pie()
        .value(function (d) { return d });

var arcs = group.selectAll('.arc')
        .data(pie(data))
        .enter()
        .append('g')
        .attr('class', 'arc')
        .on('click', function () {
            console.log(this);
        });

arcs.append('path')
    .attr('d', arc)
    .attr('stroke', '#fff') // <-- THIS
    .attr('stroke-width', '1') // <-- THIS
    .attr('fill', '#dddddd');
    // .attr('fill', function (d) { return color(d.data) });

arcs.append('text')
    .attr('transform', function (d) { return 'translate(' + arc.centroid(d) + ')' })
    .text(function (d) { return d.data });

现在我想将这些文本/标签添加到每个弧12:00, 13:00, 14:00, 15:00, 16:00, 17:00, 18:00, 07:00, 08:00, 09:00, 11:00。 如何实现这一目标？

Answer 1

由于弧的大小实际上并不依赖于数据，因此您可以将值硬编码到饼图布局中，使所有弧的大小相同。

var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) { return 10; });

我还添加了.sort(null)以防止布局尝试对弧进行排序。默认情况下，饼图布局会尝试将弧从最大到最小排序，因此如果弧的大小相同，则会产生意外结果。

现在数据与弧大小分离，您可以使用标签作为数据。

var data = ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '07:00', '08:00', '09:00', '11:00'];

进行这两项更改应该可以满足您的需求。我将带有这些更改的代码放入jsfiddle。

在其上创建具有不同标签/文本的相同大小的弧

1 个答案: