javascript - 带标签的 D3 仪表图

Question

我在 d3 中见过各种图表，并且大多数都可以工作。我见过分段仪表、可改变颜色的 180 度仪表(迄今为止最好的仪表)和速度计式仪表图表。

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

例如:我有一个 180 度仪表图表，百分比为 0 到 100。在 0 到 33% 之间，标签文本“无风险”应位于该部分上方，而 34% 到 66% 则应包含文本“有些风险”其上方，67% 到 100% 部分应在其上方显示“总风险”文本或类似内容。

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

由于进一步的研究，我找到了以下内容: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");