我是D3.js的新手,但目前正在尝试使用d3.js v4构建GANTT图表。
我已设法为图表添加缩放功能,但我希望它在y轴上采取不同的行动。目前,我可以平移和缩放y轴,但我只想平移。这是因为缩放通过使所有元素在y轴图上展开而引起问题。这个问题有一个简单的解决方法吗?
以下是我的尺度:
//Scale xAxis
var xScale = d3.scaleTime()
.domain([minDate, maxDate])
.range([0, graphWidth])
//Scale yAxis
var yScale = d3.scaleLinear()
.domain([1, 10])
.range([50, 550])
这是我在缩放事件期间运行的函数。
function zoom() {
// re-scale x axis during zoom
xAxis.transition()
.duration(0)
.call(d3.axisTop(xScale).scale(d3.event.transform.rescaleX(xScale)));
// re-draw rectangles using new x-axis scale
var new_xScale = d3.event.transform.rescaleX(xScale);
var new_yScale = d3.event.transform.rescaleY(yScale);
rect
.attr("x", function(d) { return new_xScale(d.startDate) })
.attr("y", function(d) { return new_yScale(d.id) - 35})
.attr("width", function(d) { return new_xScale(d.endDate) - new_xScale(d.startDate) })
taskInfo
.attr("y", function(d) { return new_yScale(d.id) })
}
有什么想法吗?