Question

我在D3.js v4上有一个热图，我正在尝试为它添加缩放和平移功能。缩放仅适用于x轴，不会更改y轴。与缩放相关的部分如下：

var x = d3.scaleTime().range([0, width]).domain([minDate, maxDate]);
var xAxis = d3.axisBottom().scale(x);
var zoom = d3.zoom().scaleExtent([1, 2])
             .translateExtent([[80, 20], [width, height]])
             .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
    xAxis.scale(d3.event.transform.rescaleX(x));
    svg.select(".x.axis").call(xAxis);
    update();
}

function update() {
    svg.selectAll(".cell")
        .attr('clip-path', 'url(#plotAreaClip)')
        .attr("x", function (d) { return x(d.timestamp); })
        .attr("y", function (d) { return y(d.hour); })
        .attr("width", function (d) { return x(d3.timeWeek.offset(d.timestamp, 1)) - x(d.timestamp); })
        .attr("height", function (d) { return y(d.hour + 1) - y(d.hour); })
        .attr("fill", function (d) { return colorScale(d.value); });
}

当我在update()函数中实际注释掉zoomed()时，我可以看到轴放大/缩小。但是当函数中有update()时，它只会删除图表中的所有矩形。

JS Fiddle链接是https://jsfiddle.net/7z1f4c5p/（我不知道将csv文件上传到JSFiddle的方法所以我必须将整个数据写入JS部分。很抱歉。代码位于底部。如果删除对第97行的评论，缩放将不起作用。

Answer 1

您需要在componentWillUnmount() { this.itemsRef.off(); this.connectedRef.off('value', this.handleValue); }中应用新的比例值。

update()

看起来function update() { // update: cache rescaleX value var rescaleX = d3.event.transform.rescaleX(x); svg.selectAll(".cell").attr('clip-path', 'url(#plotAreaClip)') // update: apply rescaleX value .attr("x", function(d) { return rescaleX(d.timestamp); }).attr("y", function(d) { return y(d.hour); }) // update: apply rescaleX value .attr("width", function(d) { return rescaleX(d3.timeWeek.offset(d.timestamp, 1)) - rescaleX(d.timestamp); }).attr("height", function(d) { return y(d.hour + 1) - y(d.hour); }).attr("fill", function(d) { return colorScale(d.value); }); }中的rect没有clipPath和width。

height

这是工作小提琴 - https://jsfiddle.net/7z1f4c5p/2/

您需要调整图表的左右空间。缩放时看起来有点偏。

在放大D3.js / v4时重绘热图

1 个答案: