问题描述
问题：
我是D3.js的新手，我创建了一个从数组获取数据的条形图。 我将文本放在条形图的顶部，并且文本比条形图本身宽。 我想将其垂直旋转，以使文本穿过条的中间。
我知道.attr("transform", "rotate(180)")无效，因为它会将我的文字在屏幕外旋转。
我在找到了Mike Bostock的答案，但这似乎对我不起作用，我不知道自己在做什么错。
他说我需要更改原点的旋转点，但是我无法使其生效。
感谢您的帮助，您可以在下面找到代码：
var label = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x", function(d, i){
xText = i*(w/data.length);
return xText;
})
.attr("y", function(d){
yText = h - yScale(d);
return yText;
})
.attr("transform", "translate(" + xText + "," + yText + ") rotate(90)")
.attr("fill", "black")
.attr("font-family", "sans-serif")
.attr("font-size", "11px");
谢谢！
1楼
您将同时设置x和y属性并转换了文本。
通过旋转，您只想使用translate ：
.attr("transform", function(d,i){
var xText = i * (w / data.length);
var yText = h - yScale(d.v);
return "translate(" + xText + "," + yText + ") rotate(90)";
})
另外，我发现您的示例代码令人困惑，我假设您的数据是一个字符串数组，因为您这样做：
.text(function(d) {
return d;
})
但这会使yScale(d)返回NaN。
这是一个很好的示例：
<html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var w = 300, h = 300, data = [{ t: "Now", v: 50 },{ t: "is", v: 25 },{ t: "the", v: 10 },{ t: "winter", v: 30 }]; var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h); var yScale = d3.scale.linear() .range([0, h]) .domain([60, 0]); var label = svg.selectAll("text") .data(data) .enter() .append("text") .text(function(d) { return dt; }) .attr("transform", function(d,i){ var xText = i * (w / data.length); var yText = h - yScale(dv); return "translate(" + xText + "," + yText + ") rotate(90)"; }) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-size", "11px"); </script> </body> </html>
2楼
<!DOCTYPE html> <meta charset="utf-8"> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var data = [{ "letter": "A", "frequency": 0.08167 }, { "letter": "B", "frequency": 0.01492 }, { "letter": "C", "frequency": 0.02782 }, { "letter": "D", "frequency": 0.04253 }, { "letter": "E", "frequency": 0.12702 }]; var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 500 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); 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(10, "%"); 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 + ")"); x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); function type(d) { d.frequency = +d.frequency; return d; } var text = svg.selectAll(".text").data(data); text.enter() .append("text") .attr("class", "text") .attr("x", function(d, i) { return x(d.letter); }) .attr("y", function(d) { return y(d.frequency); }) .text(function(d) { return d.letter; }) .attr("transform", function(d) { return "rotate(90 " + x(d.letter) + "," + (y(d.frequency) - d.letter.length) + ")" }); </script>
您可以尝试一下，并作为基础可以根据需要进行修改。 希望对您有所帮助。