Javascript D3.js-将文本旋转到垂直方向

问题是：

我是D3.js的新手，我创建了一个从数组中获取数据的条形图。我把文本放在条的顶部，文本比条本身宽。我想垂直旋转它，使文本穿过条的中间

我知道

.attr（“transform”，“rotate（180）”）

不起作用，因为它会将我的文本旋转到屏幕外。我从迈克·博斯托克那里找到了答案，但这似乎对我不起作用，我不知道我做错了什么。他说我需要改变原点的旋转点，但我不能让它工作

感谢您的帮助，您可以找到以下代码：

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");

---

谢谢

您正在设置

x

和

y

属性并翻译文本。旋转时，您只需使用

平移

：

.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

下面是一个很好的例子：

var w=300，
h=300，
数据=[{
t：“现在”，
v:50
},{
t:“是”，
v:25
},{
t:“the”，
v:10
},{
t:“冬天”，
v:30
}];
var svg=d3.select（'body'）
.append（'svg'）
.attr（'宽度'，w）
.attr（'高度'，h）；
var yScale=d3.scale.linear（）
.范围（[0，h]）
.域（[60,0]）；
var label=svg.selectAll（“文本”）
.数据（数据）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d.t；
})
.attr（“转换”，函数（d，i）{
var xText=i*（带数据长度）；
var yText=h-Y刻度（d.v）；
返回“translate（“+xText+”，“+yText+”）rotate（90）”；
})
.attr（“填充”、“黑色”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）；

您正在设置

x

和

y

属性并翻译文本。旋转时，您只需使用

平移

：

.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

下面是一个很好的例子：

var w=300，
h=300，
数据=[{
t：“现在”，
v:50
},{
t:“是”，
v:25
},{
t:“the”，
v:10
},{
t:“冬天”，
v:30
}];
var svg=d3.select（'body'）
.append（'svg'）
.attr（'宽度'，w）
.attr（'高度'，h）；
var yScale=d3.scale.linear（）
.范围（[0，h]）
.域（[60,0]）；
var label=svg.selectAll（“文本”）
.数据（数据）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d.t；
})
.attr（“转换”，函数（d，i）{
var xText=i*（带数据长度）；
var yText=h-Y刻度（d.v）；
返回“translate（“+xText+”，“+yText+”）rotate（90）”；
})
.attr（“填充”、“黑色”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）；

.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
风险值数据=[{
“信”：“A”，
“频率”：0.08167
}, {
“信”：“B”，
“频率”：0.01492
}, {
“信”：“C”，
“频率”：0.02782
}, {
“信”：“D”，
“频率”：0.04253
}, {
“信”：“E”，
“频率”：0.12702
}];
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=500-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
x、 域（data.map）（函数（d）{
回信；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.frequency；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.letter）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.attr（“高度”，功能（d）{
返回高度-y（d.频率）；
});
功能类型（d）{
d、 频率=+d.频率；
返回d；
}
var text=svg.selectAll（“.text”）.data（数据）；
text.enter（）
.append（“文本”）
.attr（“类”、“文本”）
.attr（“x”，函数（d，i）{
返回x（d.letter）；
})
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.文本（功能（d）{
回信；
})
.attr（“转换”，函数（d）{
返回“旋转（90”+x（d字母）+”，“+（y（d字母频率）-d字母长度）+”
});