表示サンプルはこちら
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="text">
</div>
JavaScript
//テキストを3つ並べる
var width = 400;
var height = 400;
var svgtext = d3.select("#text")
.append("svg")
.attr("width",width)
.attr("height",height);
var textspoint = [{text: 'りんご'}, {text: '100'}, {text: '円'}];
var textsSelection = svgtext
.append('g')
.attr('transform','translate('+ width/2 +',' + height/2 + ')')
.selectAll('text.numbers')
.data(textspoint)
.enter();
textsSelection.append('text')
.attr("fill", 'rgba(0, 0, 0, 0.8)')
.attr("text-anchor", 'middle')
.attr("font-size", function(d,i) {
if(i == 0) {
return "16px";
} else if(i == 1) {
return "136px";
} else if(i == 2) {
return "16px";
}
})
.text(function(d) {
return d.text;
})
.each(function(d,i) {
var bbox = this.getBBox();
if(i == 1) {
value_width = bbox.width;
}
})
.attr("x", function(d,i) {
if(i == 0) {
return -value_width/2-15;
} else if(i == 1) {
return 0;
} else {
return value_width/2+15;
}
});
CSS
body{
background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
}
#text {
height: 500px;
position: relative;
}
svg {
width: 100%;
height: 100%;
}