sugi2000/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ラベルのテストです。

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <title>Labels</title>
    <style type="text/css">
	    text.label.on {
		    fill: red;
		    font-weight: bold;
	    }
    </style>
  </head>
  <body>
    <div class="container">
    </div>
    <script src="labels.js" charset="utf-8"></script>
  </body>
</html>

## labels.js
var labels = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8'];

var width = 960;
var height = 960;
var padding = 20;

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

svg.append('rect')
	.attr('class', 'highlight')
	.attr('x', 0)
	.attr('y', -1000)
	.attr('width', width)
	.attr('height', (height - padding * 2) / labels.length)
	.attr('fill', 'pink');

svg.selectAll('text.label')
	.data(labels)
	.enter()
	.append('text')
	.attr('class', 'label')
	.attr('x', width /2)
	.attr('y', function(d,i){ return padding + (height - padding * 2) / labels.length * (i + 0.5); })
	.attr('text-anchor', 'middle')
	.on('click', function(d,i) {
		d3.selectAll('text.label.on')
					.attr('class','label');
		this.classList.add('on');
		highlightLabel(i);
	})
	.text(function(d){return d;});

function highlightLabel(i) {
	svg.selectAll('rect.highlight')
		.transition()
		.duration(300)
		.attr('y', padding + (height - padding * 2) / labels.length * i);
}

d3.select(self.frameElement).style("height", height + "px");
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<title>Labels</title>
	<style type="text/css">
	text.label.on {
	fill: red;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div class="container">
	</div>
	<script src="labels.js" charset="utf-8"></script>
	</body>
	</html>
	var labels = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8'];

	var width = 960;
	var height = 960;
	var padding = 20;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append('rect')
	.attr('class', 'highlight')
	.attr('x', 0)
	.attr('y', -1000)
	.attr('width', width)
	.attr('height', (height - padding * 2) / labels.length)
	.attr('fill', 'pink');

	svg.selectAll('text.label')
	.data(labels)
	.enter()
	.append('text')
	.attr('class', 'label')
	.attr('x', width /2)
	.attr('y', function(d,i){ return padding + (height - padding * 2) / labels.length * (i + 0.5); })
	.attr('text-anchor', 'middle')
	.on('click', function(d,i) {
	d3.selectAll('text.label.on')
	.attr('class','label');
	this.classList.add('on');
	highlightLabel(i);
	})
	.text(function(d){return d;});

	function highlightLabel(i) {
	svg.selectAll('rect.highlight')
	.transition()
	.duration(300)
	.attr('y', padding + (height - padding * 2) / labels.length * i);
	}

	d3.select(self.frameElement).style("height", height + "px");