带标签的 D3 仪表图

Question

我在 d3 中看到了各种图表，并且大部分都可以正常工作。我见过分段式仪表、可改变颜色的 180 度仪表（迄今为止最好的仪表），以及速度计样式的仪表图表。

在 d3 或任何 javascript 领域内，我正在寻找的是具有某种“部分标签”的 d3 仪表图表。

例如：我有一个 180 度仪表图，百分比从 0 到 100。在 0 到 33% 之间，标签文本 No Risk 应该在该部分上方，而 34% 到 66% 应该有文本 Some Risk在它上面，并且 67% 到 100% 部分应该有文字 Total Risk 在它上面，或者类似的东西。

我的问题是，有谁知道可以做到这一点的预制仪表图，或者在标签中作弊会更好吗？制作带有标签的饼图并自己画针会是更好的选择吗？

由于进一步研究，我能够找到以下内容：http://tributary.io/inlet/5273835

我也许可以在这种风格的图表上画一根针。但是，我不知道如何将文本放在我们的部分并悬停在图表之外。有什么想法吗？

Answer 1

这是一个非常粗略的解决方案，但它可能适用于您的特定应用程序。

我本人对 d3 还很陌生。

http://codepen.io/anon/pen/KrBJn

显然这都是硬编码的，我相信有一个更优雅的定位解决方案。

chart.append("text")
    .attr("dy", "-5em")
    .attr("dx", "-11.5em")
    .attr("text-anchor", "left")
    .text("No Risk");

  chart.append("text")
    .attr("dy", "-11em")
    .attr("dx", "0em")
    .attr("text-anchor", "middle")
    .text("Some Risk");

  chart.append("text")
    .attr("dy", "-5em")
    .attr("dx", "9em")
    .attr("text-anchor", "right")
    .text("Total Risk");