如何使长标签的整个文本可见？

Question

我们有一个需要换行的长文本，在 D3.js 中尝试时，整个文本不可见。 我尝试了多个选项来包装，但实际上无法使代码适合。

我看到tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight * dy + "em").text(word); line 计算长度，但我无法理解如何动态适应文本/使长文本可见。

我的 TSV：

name    value
Committed 671 birthdays to it if there is a relevant source of information , it would be better to understand it and kids can be assigned relevant groups to particiate     .19
it should end up like this in the $_POST[] array (PHP format for easy   .19
just leave it there    .19
Ex is doing too well    .10
High school friends all dead now    .15
Discovered how to “like” things mentally    .27

我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.title {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 80, right: 180, bottom: 80, left: 180},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .3);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(8, "%");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("text")
      .attr("class", "title")
      .attr("x", x(data[0].name))
      .attr("y", -26)
      .text("Why Are We Leaving Facebook?");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll(".tick text")
      .call(wrap, x.rangeBand());

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
});

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),



        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight * dy + "em").text(word);
      }
    }
  });
}

function type(d) {
  d.value = +d.value;
  return d;
}

</script>

结果如下：

在此处输入图片说明

Answer 1

首先，让我们进行适当的归因：称为wrap函数是由 Mike Bostock 创建的，正如您在此处看到的： https : //bl.ocks.org/mbostock/7555321 。 您可能从那里或从我们可以在互联网上找到的无数副本中复制它。

话虽如此，这个答案将提出一个使用该功能的解决方案。 当然，存在更好、更高效的解决方案。

假设您有一个长标签，如下所示：

"What would you think if I sang out of tune? 
Would you stand up and walk out on me?
Lend me your ears and I'll sing you a song 
And I'll try not to sing out of key"

在这个提议的解决方案中，我们设置了一个计数器......

var counter = 0;

...而且，在wrap函数中，我们得到最大行数：

counter = lineNumber > counter ? lineNumber : counter;

有了这些信息，我们可以使用一个幻数（例如， 20 ）乘以最大行数并将轴向上推：

margin.bottom = 20 * counter;
height = 500 - margin.top - margin.bottom;
y.range([height, 0]);

这是 Bostock 修改后的代码： https : //bl.ocks.org/GerardoFurtado/91f656cf425cb630a4e5adf98d207f35/bcda7bdb86ffffdd84000a075811ea17d4f4218a

这里有重复和不必要的步骤，您可以改进：这个答案只是一个粗略的演示，向您展示一种计算标签所需空间的方法。

如何使长标签的整个文本可见？

问题描述

1 个解决方案

解决方案1
1 2018-08-27 09:04:33

如何使长标签的整个文本可见？

问题描述

1 个解决方案

解决方案1 1 2018-08-27 09:04:33

解决方案1
1 2018-08-27 09:04:33