Question

我是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) })
}

有什么想法吗？

保留在y轴上平移的能力，而不缩放d3.js v4

0 个答案: