d3.js 三坐标曲线图
2016-08-31 00:00
369 查看
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--x line,.axis--y line {stroke-opacity:.2;}
.axis--x path,.axis--y path { display: none;}
.line { fill: none; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;}
.negative{stroke: #d0c943;} /* 负舆情 */
.square{fill: #d0c943;} /* 正方形 */
.positive{stroke: #41CD18;}/* 正舆情 */
.diamond{fill: #41CD18;} /* 菱形 */
.price{stroke: #16eae6;} /* 股价 */
.triangle{fill:#16eae6;} /* 三角形 */
</style>
<svg width="1000" height="400"></svg>
<script src="d3.v4.min.js"></script>
<script src="jquery-3.1.0.min.js"></script>
<script>
var xNum = ["0801","0802","0803","0804","0805","0806","0807","0808","0809","0810","0811","0812","0813","0814","0815","0816","0817","0818","0819","0820","0821","0822"],
yLengthL = 120,
yLengthR = 30,
xLength = xNum.length,
xData = [],
xTickNum = [],
yData = [];
for(var i =0;i<= xLength;i++){
xTickNum.push(i);
xData.push({x:i,y:(Math.random()*yLengthR)});
yData.push({x:i,y:(Math.random()*yLengthL)});
}
//删除最后一个
xData.pop();
yData.pop();
var svg = d3.select("svg"),
margin = {top: 40, left: 90, bottom: 100, right: 100},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
//三条轴线的比例尺
var xScale = d3.scaleLinear().domain([0,xLength]).range([0,width]),
yScaleL = d3.scaleLinear().domain([0,yLengthL]).range([height, 0]),
yScaleR = d3.scaleLinear().domain([0,yLengthR]).range([height,0]);
var xAxis = d3.axisBottom(xScale)
.tickValues(xTickNum) //指定刻度
.tickFormat(formatTick);//对指定刻度进行转换
var g = svg.append('g').attr("transform","translate("+margin.left+","+margin.top+")");
//创建x轴
g.append("g").attr("class","axis--x").attr("transform","translate(0,"+yScaleL(0)+")")
.call(xAxis)
.selectAll(".tick text")
.attr("text-anchor","middle")
.attr('transform','translate('+(width/xLength)/2+',0)')
//创建y轴(左边)
g.append("g").attr("class","axis--y left") //tickSize:刻度线的长度，ticks:不是很清楚这个参数的作用
.call(d3.axisLeft(yScaleL).ticks(8).tickSize(-width)).selectAll("text").attr('dx','-1em');
//创建y轴(右边)
g.append("g").attr("class","axis--y right")
.call(d3.axisRight(yScaleR).ticks(8).tickSize(0))
.attr('transform','translate('+(width+10)+','+'0)')
var L_arr = ['舆','情','数','量','/','条'], //左Y轴名
r_arr = ['日','收','盘','价','/','元']; //右Y轴名
d3.select(".left")
.append("text")
.attr("x",-40)
.attr("y",70)
.call(newLine,L_arr);
d3.select(".right")
.append("text")
.attr("x",30)
.attr("y",70)
.call(newLine,r_arr);
//线段生成器
var line_R = d3.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return yScaleR(d.y); });
var line_L = d3.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return yScaleL(d.y); });
//符号生成器
var symbol = d3.symbol();
var path = g.append("g").attr("class","path").attr('transform','translate('+(width/xLength)/2+',0)');
var price_g = path.append("g");
//收盘价曲线
price_g.call(createLine,xData,"line price",line_R);
//曲线上的三角形
price_g.call(createSymbol,xData,"triangle",d3.symbolTriangle,yScaleR);
var positive_g = path.append('g');
//正舆情曲线 //square
positive_g.call(createLine,xData,"line positive",line_L);
//曲线上的正方形
positive_g.call(createSymbol,xData,"diamond",d3.symbolSquare,yScaleL);
var negative_g = path.append('g');
//负舆情曲线
negative_g.call(createLine,yData,"line negative",line_L);
//曲线上的菱形
negative_g.call(createSymbol,yData,"square",d3.symbolDiamond,yScaleL);
//创建每个节点上的符号
function createSymbol(container,datas,className,symbols,yScale){
container
.selectAll("."+className)
.data(datas)
.enter()
.append("path")
.attr("d", symbol.type(symbols))
.attr("class",className)
.attr('transform',function(d){
return 'translate('+xScale(d.x)+','+yScale(d.y)+')';
})
;
}
//创建曲线
function createLine(container,datas,className,line){
container
.append("path")
.datum(datas)
.attr("class", className)
.attr("d", line);
}
//取每个刻度对应的日期
function formatTick(d,i){
return xNum[i];
}
//换行函数
function newLine(text,datas){
text.selectAll("tspan")
.data(datas)
.enter()
.append('tspan')
.attr("x",text.attr("x"))
.attr("dy","1.2em") //上下字间距
.attr("font-size","12px")
.attr("fill","#000")
.text(function(d){return d;})
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 