的index.html

Question

我正在尝试使用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个字符的节点名称。如何自动调整最终输出。

Answer 1

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

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

变为

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

这会将包含整个可视化的组移动到其他一些像素上。如果你想聪明一点，你可以实际测量字符串“country”的长度并转换为该数量。例如：

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的自动化测试）非常难以使用。

Answer 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

将d3js图表放在一个简单的html页面中

的index.html

2 个答案: