如何旋转nvd3.js折线图x轴的文本标签
我不熟悉nvd3和d3 js。我正在使用nvd3创建折线图。现在我想旋转折线图x轴的文本标签。如何实现？ 我试着用如何旋转nvd3.js折线图x轴的文本标签,d3.js,nvd3.js,D3.js,Nvd3.js,我不熟悉nvd3和d3 js。我正在使用nvd3创建折线图。现在我想旋转折线图x轴的文本标签。如何实现？ 我试着用 var xTicks = d3.selectAll('g.tick'); xTicks .selectAll('text') .attr('transform', function(d,i,j) { return ' rotate(-90 0,0)' }) ; 但没有成功 我现在的代码是 <!DOCTYPE html> <html> <
var xTicks = d3.selectAll('g.tick');
xTicks
.selectAll('text')
.attr('transform', function(d,i,j) { return ' rotate(-90 0,0)' }) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.dashed {
stroke-dasharray: 5,5;
}
</style>
<script type="text/javascript">
function download()
{
img = new Image(),
serializer = new XMLSerializer(),
svgStr = serializer.serializeToString(document.getElementById('svg'));
img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
// You could also use the actual string without base64 encoding it:
//img.src = "data:image/svg+xml;utf8," + svgStr;
var canvas = document.createElement("canvas");
var w=3000;
var h=3000;
canvas.width = w;
canvas.height = h;
canvas.getContext("2d").drawImage(img,0,0,w,h);
var imgURL = canvas.toDataURL("image/png");
var dlLink = document.createElement('a');
dlLink.download = "image";
dlLink.href = imgURL;
dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
</script>
</head>
<body class='with-3d-shadow with-transitions'>
<div style="position:absolute; top: 0; left: 0;">
<button onclick="randomizeFillOpacity();">Randomize fill opacity</button>
<button onclick="expandLegend();">Expand/Contract Legend</button>
<script>
var expandLegend = function() {
var exp = chart.legend.expanded();
chart.legend.expanded(!exp);
chart.update();
}
</script>
</div>
<div id="chart1" width="100%" height='100%'></div>
<button onclick="download()">Download</button>
<script>
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
var chart;
var data;
var randomizeFillOpacity = function() {
var rand = Math.random(0,1);
for (var i = 0; i < 100; i++) { // modify sine amplitude
data[4].values[i].y = Math.sin(i/(5 + rand)) * .4 * rand - .25;
}
data[4].fillOpacity = rand;
chart.update();
};
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'))
.staggerLabels(true)
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(function(d) {
if (d == null) {
return 'N/A';
}
return d3.format(',.2f')(d);
})
;
data = sinAndCos();
d3.select('#chart1').append('svg')
.datum(data)
.attr("id","svg")
.attr("height","1000")
.attr("width","1000")
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() {
var /*sin = [],
sin2 = [],*/
cos = [],
/* rand = [],*/
rand2 = []
;
for (var i = 0; i < 100; i++) {
cos.push({x: i, y: .5 * Math.cos(i/10)});
rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
}
return [
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
},
{
values: rand2,
key: "Random Cosine",
color: "#667711",
strokeWidth: 3.5,
fillOpacity: .1,
classed: 'dashed',
area: true,
}
];
}
</script>
</body>
</html>
正文{
字体：12px无衬线；
}
svg{
显示：块；
}
html、正文、图表1、svg{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
}
.虚线{
笔划数组：5,5；
}
函数下载（）
{
img=新图像（），
serializer=新的XMLSerializer（），
svgStr=serializer.serializeToString（document.getElementById（'svg'）；
img.src='data:image/svg+xml；base64'+window.btoa（svgStr）；
//您也可以使用实际字符串而不使用base64编码：
//img.src=“data:image/svg+xml；utf8，”+svgStr；
var canvas=document.createElement（“canvas”）；
var w=3000；
var h=3000；
画布宽度=w；
canvas.height=h；
canvas.getContext（“2d”）.drawImage（img，0,0，w，h）；
var imgURL=canvas.toDataURL（“image/png”）；
var dlLink=document.createElement（'a'）；
dlLink.download=“image”；
dlLink.href=imgURL；
dlLink.dataset.downloadurl=[“image/png”，dlLink.download，dlLink.href]。加入（“：”）；
document.body.appendChild（dlLink）；
dlLink.click（）；
document.body.removeChild（dlLink）；
}
随机化填充不透明度
展开/收缩图例
var expandLegend=函数（）{
var exp=chart.legend.expand（）；
图表.图例.展开（！exp）；
chart.update（）；
}
下载
//在nv.addGraph中包装允许“0超时渲染”，将渲染的图表存储在nv.graphs中，并且将来可能会执行更多操作。。。这不是必需的
var图；
var数据；
var randomizefillocapacity=函数（）{
var rand=数学随机（0,1）；
对于（var i=0；i<100；i++）{//修改正弦振幅
数据[4]。值[i]。y=Math.sin（i/（5+rand））*.4*rand-.25；
}
数据[4]。fillOpacity=rand；
chart.update（）；
};
nv.addGraph（函数（）{
chart=nv.models.lineChart（）
.选项({
过渡期：300，
useInteractiveGuideline：真
})
;
//图表子模型（即xAxis、yAxis等）在直接访问时返回自身，而不是父图表，因此需要单独链接
chart.xAxis
.axisLabel（“时间”）
.tickFormat（d3.format（'，.1f'））
.错误标签（正确）
;
图1.yAxis
.Axis标签（“电压（v）”
.d格式（函数（d）{
如果（d==null）{
返回“不适用”；
}
返回d3.format（'，.2f'）（d）；
})
;
数据=sinAndCos（）；
d3.选择（'#图表1'）。追加（'svg'））
.基准（数据）
.attr（“id”、“svg”）
.attr（“高度”、“1000”）
.attr（“宽度”，“1000”）
.电话（图表）；
nv.utils.windowResize（图表更新）；
收益表；
});
函数sinAndCos（）{
var/*sin=[]，
sin2=[]*/
cos=[]，
/*兰德=[]*/
rand2=[]
;
对于（变量i=0；i<100；i++）{
cos.push（{x:i，y:.5*Math.cos（i/10）}）；
rand2.push（{x:i，y:Math.cos（i/10）+Math.random（）/10}）
}
返回[
{
价值观：cos，
键：“余弦波”，
颜色：“2ca02c”
},
{
价值观：rand2，
键：“随机余弦”，
颜色：#667711“，
冲程宽度：3.5，
不透明度：.1，
分类：“虚线”，
面积：对，
}
];
}
chart.xAxis
.rotateLabels(-45)