d3js星图 - 响应式传奇

Question

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

//桌面 - 充足的空间

//移动 - 空间不足

我已清理了图例部分 - 您可以清理代码库并在此处添加更多注释。我所拥有的旧功能之一 - 如果图表中没有足够的空间，传说堆叠在下面 - 比如响应式设计 - 我曾经创建过2个svg部分，但显然d3应该只有1 svg - {{ 3}} 看看图表是否可以在不同大小的情况下更加动态 - 我认为我必须在半径上添加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) + ")");

将图表拆分为两个svgs的版本 http://jsfiddle.net/h066yn5u/13/

Answer 1

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

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