在多行图表中,在每一行的末尾,我想要一个小圆圈和使用d3.js的端点值
In multiline chart, at the end of each line i want a small circle and the value of the end point using d3.js
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: green;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="d3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
//2015-06-20
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var priceline = d3.svg.line().interpolate("basis")
.x(function(d) { console.log(d.T1); return x(d.T1); })
.y(function(d) { return y(d.NATURE_QUERY); });
// Adds the svg canvas
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 + ")");
// Get the data
d3.csv("datatest.csv", function(error, data) {
data.forEach(function(d) {
console.log(d.T1);
d.T1 = parseDate(d.T1);
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.T1; }));
y.domain([0, d3.max(data, function(d) { return d.NATURE_QUERY; })]);
// Nest the entries by symbol
var dataNest = d3.nest()
.key(function(d) {return d.CLOSING_DEPT;})
.entries(data);
console.log(dataNest);
// Loop through each symbol / key
dataNest.forEach(function(d) {
svg.append("path")
.attr("class", "line")
.attr("d", priceline(d.values));
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
这是我的代码,但我想在每一行的末尾画一个小圆圈,并附上端点的值。我不得不在这里添加我的数据文件,而且我是d3.js的新手,所以建议我使用这些想法。谢谢
请在此处找到tsv数据集
你可以这样做:
dataNest.forEach(function(d){
//iterate over all the data for line to get the last point of a line.
var k = d.values
var last = k[k.length -1];//get the last value of the line
svg.append("circle")
.attr("cx", function(d){return x(last.T1);})//make a circle at the last point
.attr("cy", function(d){return y(last.NATURE_QUERY);})
.attr("r", 4);
//make a text
svg.append("text")
.attr("x", function(){return x(last.T1) + 20;})
.attr("y", function(){return y(last.NATURE_QUERY);})
.text(function(){return last.CLOSING_DEPT;}) //set the text you want to display.
})
此处的工作代码
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 在多行图表中,在每一行的末尾,我想要一个小圆圈和使用d3.js的端点值
- 节点中的端点与快速应用程序.js之间的冲突
- 如何将变量从Jade传递到Node.js端点函数
- Breeze.js-将保存重定向到自定义端点
- RESTful JSON 端点应该以 .js 结尾吗?JSONP呢?
- node-js包含的路由文件不允许端点
- Node.js具有多个端点的应用程序
- express.js HTTP方法与RESTapi端点
- 如何使用会话数据向服务器节点js中的端点执行POST请求
- Node.js Mocha测试Restful API端点和代码覆盖率
- 为什么我的node.js端点保存数据到数组引发错误,而修改数据
- Backbone.js:如何显式地从flask端点请求json
- 在happi .js中,我可以重定向到不同的端点并设置statusCode
- Ember.js/Ember-Data:使用RESTAdapter从多个端点加载数据
- 使用D3.JS访问同一网站上的API端点
- js-datav3-将元信息保存在分页的端点中
- D3.js线形图不触及端点
- 使用angular js阻止客户端点击地址栏时的导航