刻度文本/变量标签未包裹在d3条形图中 [英] Tick text/variable labels not wrapping in d3 bar chart

问题描述

我正在尝试在d3条形图中将换行符沿x轴应用于长变量标签.这是我在Observable笔记本中的图表:
我想要达到的目标:我还尝试将 wrap 函数移动到代码的其他位置，在代码的早期和以后，以及尝试将以下行移动

  .selectAll(.tick text").call(包装，x.bandwidth()) 

在此代码块中的某处工作，如下所示:

  xAxis = g =>G.attr("transform"，`translate(0，$ {height-margin.bottom})`).style("font-family"，"HelveticaNeueLTStd-Cn").style("font-size"，"9px").call(d3.axisBottom(x).tickSizeOuter(0)).selectAll(.tick text").call(包装，x.bandwidth()) 

但是也是如此(试图适应我的可观察笔记本?

解决方案

我成功地将文本包装技术应用于 Gerardo Furtado .它包含以下代码:

  svg.append("g").call(yAxis);const axis = svg.append("g").call(xAxis);setTimeout(()=> {axis.selectAll(.tick text").style("font-family"，"HelveticaNeueLTStd-Cn").style("font-size"，"9px").call(wrap，x.bandwidth());}，0); 

这是工作解决方案.

I'm trying apply line wrapping to long variable labels along the x-axis in a d3 bar chart. Here's an my chart in an Observable notebook: https://observablehq.com/@unfpamaldives/figure4

I've attempted to apply a solution from this block, consisting essentially of the following:

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)
      }
    }
  })
}  

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(0, ${height})`)
      .call(xAxis)
    .selectAll(".tick text")
      .call(wrap, x.bandwidth())

What it looks like:
What I'm trying to achieve: I've also tried moving the wrap function elsewhere, earlier and later in the code, as well as tried moving the following lines

.selectAll(".tick text")
  .call(wrap, x.bandwidth())

to work from somewhere in this block of code, like so:

xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
  .style("font-family", "HelveticaNeueLTStd-Cn")
  .style("font-size", "9px")
.call(d3.axisBottom(x).tickSizeOuter(0))
.selectAll(".tick text")
  .call(wrap, x.bandwidth())

But this too (attempting to adapt Bostock's solution) does not work. (I've gotten text wrapping to work in other d3 visualizations before, for what it's worth.) Can anyone demonstrate a working solution based on a fork of my Observable notebook?

解决方案

I successfully applied a text wrapping technique for the x-axis bar/variable labels featured in this example from Gerardo Furtado. It entails the following code:

  svg.append("g")
      .call(yAxis);

  const axis = svg.append("g")
      .call(xAxis);  

  setTimeout(()=>{
  axis.selectAll(".tick text")
      .style("font-family", "HelveticaNeueLTStd-Cn")
      .style("font-size", "9px")
    .call(wrap, x.bandwidth());
  }, 0); 

Here's the working solution.

这篇关于刻度文本/变量标签未包裹在d3条形图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！