【问题标题】：Fit the d3js graph in a simple html page在一个简单的 html 页面中拟合 d3js 图形
【发布时间】：2017-05-16 14:15:41
【问题描述】：

我正在尝试使用来自here 的示例，我的文件如下：

index.html

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta charset="utf-8">
<style>

.node circle {
  fill: #999;
}

.node text {
  font: 10px sans-serif;
}

.node--internal circle {
  fill: #555;
}

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

</style>
</head>
<body>
<svg width="960" height="2000"></svg>
<script src="d3.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(40,0)");

var tree = d3.cluster()
    .size([height, width - 160]);

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.csv("test.csv", function(error, data) {
  if (error) throw error;

  var root = stratify(data)
      .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });

  tree(root);

  var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

  var node = g.selectAll(".node")
      .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 2.5);

  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});

</script>
</body>
</html>

和 test.csv

id
country
country.USA
country.Canada
country.Russia
country.China
country.India
country.England
country.USA.Wisconsin
country.USA.Wisconsin.Madison
country.USA.Washington DC
country.Canada.Toronto
country.Canada.Ottawa
country.Russia.St Petersburg
country.India.Karnataka
country.India.Maharashtra
country.India.Delhi
country.India.Karnataka.Bangalore
country.India.Karnataka.Bangalore.city
country.India.Karnataka.Bangalore.rural
country.India.Karnataka.Mysore
country.India.Karnataka.Mangalore
country.India.Maharashtra.Mumbai
country.India.Maharashtra.Pune

生成的输出将切断第一个节点，即，而不是 country，它仅显示 ountry，如下面的屏幕截图中突出显示的：

如何解决这个问题？这只是一个示例，我有实际的 csv，其节点名称长度为 10 个字符。如何自动调整最终输出。

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

您在其中定义了g 的行，您可能只是想增加x 的翻译。

g = svg.append("g").attr("transform", "translate(40,0)");

变成

g = svg.append("g").attr("transform", "translate(60,0)");

这会将包含整个可视化的组移动到一些额外的像素上。如果您想变得聪明一点，您实际上可以测量字符串“国家”的长度并按该数量进行翻译。例如：

const countryText = g.append("g")
                     .attr("class", "node") //apply all the same classes to ensure css rules match
                     .append("text")
                    .text("country");

const width = countryText.node().getComputedTextLength()
g.attr("transform", `translate(${width}, 0)`);

服务器端： 关于测量字符串的警告。这仅在带有浏览器的环境中受支持，这会使服务器端渲染（或使用 Node 之类的自动化测试）非常难以使用。

【讨论】：

其他节点呢？例如，如果链太长，是否会缩短最后一个节点？
@kingmakerking 可能最适合解决不同的问题 - 但总而言之，您将希望使用 scale 转换或 viewBox 来做到这一点。
感谢您的建议。这里是stackoverflow.com/questions/44020549/…

【解决方案2】：

如果您查看 Bostock 的代码，您会发现他正在将所有内容附加到一个组中，该组正在向右平移 40 像素：

g = svg.append("g").attr("transform", "translate(40,0)");

解决方案：翻译更多：

g = svg.append("g").attr("transform", "translate(50,0)");

这是您更新的 bl.ocks：https://bl.ocks.org/anonymous/c873ba1afc1d58a1ea5a13a093468d39

【讨论】：