.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 0.159816026688, 6.00016117096];
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 1024]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
</script>
基于这段代码，我想在每个栏的右侧添加字符串文本。怎么做？
谢谢!
最佳答案
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart div {
font: 12px sans-serif;
background-color: steelblue;
text-align: left;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 6.00016117096];
var data_tex = {1.19209289551e-05 :'getCurrentID' , 3.70760703087: 'initialize OPK', 0.162719964981 :'GetSharedData', 0.159816026688 :'SetSharedData', 6.00016117096:'Synchronize resource'};
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 1024]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d)+ "px"; })
.append("div").text(function (d) {return data_tex[d] + ": " + d + "s";}).style("margin-left", function (d) {return x(d) + 3 + "px";}).style("background-color", "white").style("color", "brown");;
</script>
感谢 JSBob，这对我来说是完美的。
关于javascript - 在每个栏的右侧添加字符串文本。怎么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31479670/