d3.js 标题位于固定宽高比的响应式图表上方

Question

我对 d3.js 中的编程还很陌生，我想知道是否有人可以帮助我解决以下问题：

我修改了在网上找到的圆环图。我将其修改为 响应式 ，同时仍然保持圆形圆环图的 纵横比为 1。我想知道最好的方法是 在其上方或下方放置一个标题 。我尝试了多种方法，但无法创建一种始终如一的方法。

这里是简化的 JSFiddle： JSFiddle

代码也附在这里：

var width = 400;
var height = 400;

var x = {
  value: 80.43,
  color1: "#007EA7",
  color2: "#d9d9d9"
};

var margin = {
  left: 10,
  top: 10,
  right: 10,
  bottom: 10
};

width = Math.min(width - margin.left - margin.right,
  height - margin.top - margin.bottom);
height = width * 1; // Should be a perfect circle.

svg = d3.select("body")
  .append("div")
  .classed("svg-container", true)
  .append("svg")
  .attr("preserveAspectRatio", "xMidYMin meet")
  .attr("viewBox", "0 0 " + (width) + " " + (height))
  .classed("svg-content-responsive", true);


// Below is code to create the actual donut chart. It used the width and height attributes calculated above. 

var outerRadius = Math.min(width, height) / 2,
  innerRadius = (outerRadius / 5) * 4;

τ = 2 * Math.PI;
fontSize = (Math.min(width, height) / 5);

arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0);

var background = svg.append("path")
  .datum({
    endAngle: τ
  })
  .style("fill", x.color2)
  .attr("d", arc)
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var text = svg.append("text")
  .text(Math.round(x.value * 10) / 10 + '%')
  .attr("text-anchor", "middle")
  .style("font-size", fontSize + 'px')
  .attr("dy", height / 2 + fontSize / 2.5)
  .attr("dx", width / 2);

foreground = svg.append("path")
  .datum({
    endAngle: x.value / 100 * τ
  })
  .style("fill", x.color1)
  .attr("d", arc)
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

.svg-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.svg-content-responsive {
  width: 100%;
  height: 100%;
}

<script src="https://d3js.org/d3.v3.min.js"></script>

非常感谢任何可能对我有帮助的评论、建议、参考或代码片段。

谢谢，弗洛里安

Answer 1

添加类似this:

这样的东西有什么问题吗

var title = svg.append("text") 
    .text('This is the title') 
    .attr("text-anchor", "middle") 
    .style("font-size", '12px') 
    .attr("dy", 10)
    .attr("dx", width / 2);

和 text 一样吗？

_{PS：添加失败的方法将有助于人们回答问题}

Answer 2

如果以后有人遇到这个问题：我决定把我的标题放在图表下面，然后通过稍微作弊来解决它。

我使用了以下 CSS:

.svg-container {
    height:100%;
    width:100%;
    min-height: 100%;
    position:relative;
}

.svg-content-responsive {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    width: 100%;
    position: relative;
    padding-bottom: 50px;
}

.svg-gauge-title-container {
    width: 100%;
    height: 50px;
    position:relative;
    margin-top:-50px;

}

.svg-gauge-title {
    position: relative;
    width: 100%;
}

即我在图表中添加了 50px 的 padding-bottom，并且还添加了一个标题容器，上面有 50px 的边距。可能不是最干净的方法，但它确实有效。

d3.js 标题位于固定宽高比的响应式图表上方

d3.js title above responsive chart with fixed aspect ratio

d3.js

donut-chart