d3js星图-响应式图例

Question

我正在处理d3.js图表​​-此当前模型将图例段创建为ag元素。 如果容器中没有足够的空间，我想确保图例堆叠在下面。

//桌面-足够的空间

//移动-空间不足

我已经清理了图例部分-您可以清理代码库并在此处添加更多注释。 我拥有的旧功能之一-如果图表中没有足够的空间放置在图例下方-例如响应式设计-我曾经创建了2个svg部件，但显然使用d3，它应该只有1个svg- http：// jsfiddle.net/h066yn5u/13/看看不同大小的图表是否可以更加动态-我认为我必须在半径上添加10的边距以在边缘之间留一点缝隙。在svg本身上添加一个转换以添加该填充

var arcchart = chart.append("g")
    .attr("class", "starchart")
    .attr("transform", "translate("+(r+10)+"," + h / 2 + ")");



var legend = chart.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + ((r + 10) * 2) + "," + (h / 4) + ")");

一个将图表分为两个svg的版本http://jsfiddle.net/h066yn5u/14/

Answer 1

有多种方法可以解决此问题。

1. 分为2个svg容器： d3.js不仅限于一个svg容器。 您可以将图例和图表拆分为2个单独的svg容器，并让HTML处理页面流
2. 使用foreignObject：如果您不想这样做。 您可以尝试使用标签。 请记住，ie11不支持此功能（并且不支持afaik）
3. 手工计算所有内容：计算图例（包括文本）的宽度，图表的宽度，并获得整个容器的可用宽度。 如果整个容器的宽度太小，请按下下面的图例，当然要相应地调整svg的高度和宽度。