jimkang/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
Update (jimkang): Added a data accessor function as a parameter to mbostock's wrap() so that it can fetch the text from the data source rather than using text().
The problem with text() is that it is built on textContent which "returns the text content of this node and its descendants." If a text element has several tspan descendants, it joins their contents without spaces. e.g. a text element with three tspans each containing 'why', 'are', and 'we' will give back 'whyarewe' through text(). The rest of wrap will proceed to treat that as one word, naturally.
This becomes an issue when wrap() is called multiple times on text elements that have already been processed by wrap().

  
## data.tsv

          
            name
            value

            
              Family in feud with Zuckerbergs
              .17

            
              Committed 671 birthdays to memory
              .19

            
              Ex is doing too well
              .10

            
              High school friends all dead now
              .15

            
              Discovered how to “like” things mentally
              .27

            
              Not enough politics
              .12

## index.html
<!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="http://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?");

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

  function identity(d) { return d; }
  for (var i = 0; i < 4; ++i) {
    tickText.call(wrap, identity, x.rangeBand());
  }

  // Original wrap test.
  // for (var i = 0; i < 4; ++i) {
  //   tickText.call(originalWrap, 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, getTextData, width) {
  text.each(function(d) {
    // console.log('text.text()', text.text());
    var text = d3.select(this),
      words = getTextData(d).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 originalWrap(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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	name	value
	Family in feud with Zuckerbergs	.17
	Committed 671 birthdays to memory	.19
	Ex is doing too well	.10
	High school friends all dead now	.15
	Discovered how to “like” things mentally	.27
	Not enough politics	.12
	<!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="http://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?");

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

	function identity(d) { return d; }
	for (var i = 0; i < 4; ++i) {
	tickText.call(wrap, identity, x.rangeBand());
	}

	// Original wrap test.
	// for (var i = 0; i < 4; ++i) {
	// tickText.call(originalWrap, 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, getTextData, width) {
	text.each(function(d) {
	// console.log('text.text()', text.text());
	var text = d3.select(this),
	words = getTextData(d).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 originalWrap(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>