使用 d3.js 的 svg 视图框：图形上方的空间仍然太大答案

【问题标题】：svg viewbox using d3.js: space above graph is still too large使用 d3.js 的 svg 视图框：图形上方的空间仍然太大
【发布时间】：2018-10-02 18:40:42
【问题描述】：

我有一个使用 d3.js 的 svg 图，但我在使用视图框时遇到了问题。正如我现在所拥有的，图表下方的距离（30 像素）很好，但图表上方的文本之间的空间仍然太大（48 像素）。

我对视图框还没有太多经验，所以我进行了研究，发现最好的答案是在Find svg viewbox that trim whitespace around，解决方案是使用边界框。该答案涉及创建一个按钮以单击以显示正确呈现的图形，但我希望它在没有额外用户输入的情况下定位。

这是图表上方的html代码：

<h1 class="h1_info">First Entry</h1><br>
<div class="zebra_01">This is the general text to describe the issue.<br><br>
With no further improvements:<ul><li>One item was this tall<br>
</li><li>Another item was that tall</li><li>
<span class="span_00">The first is taller than the  second</span></li></ul>
</div>

<svg viewBox="0 0 700 100" preserveAspectRatio="xMinYMid meet" class="d3svg"></svg>
<script src="JS\D3_BarChart.js"></script>

其他 html 代码从此处开始，位于图表下方 30 像素处。

这里是javascript：

var dataArray = [23, 13];
var colors = [ "red", "green" ];

var names = [ "First Name", "Second Name" ];
var widths = [ "5", "700" ]
var dists = ["45", "40"]

var svg = d3.select("svg.d3svg")
  .attr("height", "auto")
  .attr("width", "100%")

var bar = svg.selectAll("g")
  .data(dataArray)
  .enter().append("g")

var gradient = svg
    .append("linearGradient")
    .attr("y1", "0%")
    .attr("y2", "20%")
    .attr("x1", "0%")
    .attr("x2", "25%")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr('class', 'start')
    .attr("offset", "0%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

gradient
    .append("stop")
    .attr('class', 'end')
    .attr("offset", "100%")
    .attr("stop-color", "green")
    .attr("stop-opacity", 1);

var rect = bar.append('rect')
  .attr("height", "7")
  .attr("width", function(d, i) { return widths[i] })
  .attr("y", function(d, i) { return (i * dists[i]) + 30 })
  .attr("x", "0")
  .attr("fill", "url(#gradient)")

var text = bar.append('text')
  .attr("class", "text-svg")
  .text (function(d, i) { return names[i] })
  .attr("x", "0")
  .attr("y", function(d, i) { return (i * dists[i]) + 55 });

所以我的问题是使用边界框是否是正确的解决方案，如何在不使用按钮的情况下进行设置？

感谢您对此的任何帮助。

【问题讨论】：

如果你知道你将从y=30开始第一个元素，那么你可以像这样调整你的viewBox：viewBox="0 30 700 100"。这也可以在绘制矩形后通过 d3 以编程方式完成。
太棒了。效果很好。非常感谢。

标签： javascript d3.js svg

【解决方案1】：

查看图表，第一个元素从y =30 开始。您可以更改 viewBox 以与此事实保持一致：

viewBox="0 30 700 100"

或者，如果您不确定第一个元素的 y 坐标，您可以使用 d3 以编程方式调整 viewBox。这是您的代码的相关部分：

var rect = bar.append('rect')
        .attr("height", "7")
        .attr("width", function(d, i) { return widths[i] })
        .attr("y", function(d, i) { return (i * dists[i]) + 30 })
        .attr("x", "0")
        .attr("fill", "url(#gradient)")
    svg.attr("viewBox", `0 ${rect.attr("y")} 700 100`) //add this. It uses es6 way to interpolate a string

最后一行采用矩形的y 属性（在本例中为最顶部的元素）并相应地更改视图框。

【讨论】：