D3.js线形图不触及端点
D3.js line graph not touching the endpoint
下面是绘制线形图的代码:
var xLabels = d3.time.scale().domain([new Date(2016, 0, 1), new Date(2016, 5, 31)]).range([0, w]);
var incidentData = [0, 0, 0, 0, 350, 208];
//console.log(xLabels);
var x = d3.scale.linear().domain([0, incidentData.length]).range([0, w]);
var y = d3.scale.linear().domain([0, d3.max(incidentData)]).range([h, 0]);
var line = d3.svg.line()
.x(function (d, i) {
return x(i);
})
.y(function (d) {
return y(d);
})
var graph = d3.select("#incident").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + 70 + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var yAxisLeft = d3.svg.axis().scale(y).orient("left");
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
graph.append("svg:path")
.attr("d", line(incidentData))
.attr('class', 'line');
graph.selectAll("dot")
.data(incidentData)
.enter().append("circle")
.attr("r", 2.5)
.attr("cx", function (d,i) { return x(i); })
.attr("cy", function (d) { return y(d); });
graph
.attr("stroke-dasharray", 500 + " " + 500)
.attr("stroke-dashoffset", 500)
.transition() // Call Transition Method
.duration(4000) // Set Duration timing (ms)
.ease("linear") // Set Easing option
.attr("stroke-dashoffset", 0);
但是最后一行没有触及点208。这是网址:https://jsfiddle.net/AbhilashDK/ksto1reb/7/请问谁能解释一下出了什么问题?
谢谢
Gerardo Furtado感谢您的回复。它工作。
嗨,大家跟着这个小提琴,这解决了这个问题。
解决方案是从
graph
.attr("stroke-dasharray", 500 + " " + 500)
.attr("stroke-dashoffset", 500)
graph
.attr("stroke-dasharray", 550 + " " + 550)
.attr("stroke-dashoffset", 550)
问候,
相关文章:
- 可以'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阻止客户端点击地址栏时的导航