Question

我有一个使用此代码的d3.js饼图：

      var legend = svg.selectAll('.legend')
        .data(color.domain())
        .enter()
        .append('g')
        .attr('class', 'legend')
        .attr('transform', function(d, i) {
          var height = legendRectSize + legendSpacing;
          var offset =  height * color.domain().length / 2;
          var horz = (-2 * legendRectSize) - 27;
          var vert = i * height - offset;
          return 'translate(' + horz + ',' + vert + ')';
        })
        .on("click", function(d,i){
          console.log(d);  
          console.log(i);  
        });

      legend.append('rect')
        .attr('width', legendRectSize)
        .attr('height', legendRectSize)                                   
        .style('fill', color)
        .style('stroke', color);

      legend.append('text')
        .attr('x', legendRectSize + legendSpacing)
        .attr('y', legendRectSize - legendSpacing)
        .text(function(d) { return d; });

结果包含很多项目，饼图看起来不错，但图例太长了。我现在想要在饼图的中心使图例元素自动滚动，以便图例不会与饼图本身重叠。

如何做到这一点？

作为替代方案，如何将图例限制为仅10项？（不限制饼图结果为10项）

Answer 1

要创建一个可滚动的容器，您必须为图例本身创建一个单独的svg，并将其包含在div中，并将div定位到您需要的坐标。（当然，你必须在div中添加CSS，即max-height为饼图高度和overflow：auto;具有自动滚动功能）

如果您需要帮助，请告诉我。

替代方案，您可以在不更改原始数据的情况下执行此操作：

var legend = svg.selectAll('.legend')
        .data(color.domain().slice(0, 10))

d3.js - 自动滚动饼图图例

1 个答案: