缩放时更改椭圆的宽度

Question

我正在尝试在 D3js 中创建具有缩放和平移功能的热图。到目前为止，我的平移功能可以正常工作，但我在缩放功能方面遇到了一个小问题。

缩放功能应该只能在 x 轴方向上缩放 (stretch/squeeze)，目前也是如此。现在，热图的初始视图（当我加载脚本时）向我显示了带有挤压点的整个数据集，这正是我想要的。问题是当我放大时，被挤压的点仍然被挤压，这导致它们之间存在巨大的差距。我想要的是缩放 SVG 椭圆（点）的 dotWidth 以避免这种情况。但是，我不确定如何实施它。下面是我的脚本中的一些代码示例。

更具体地说：如果椭圆的初始高度和宽度分别为1和3，我希望宽度在1和3之间缩放，所以在最大缩放下它变成了一个圆。

创建热图：

var dotWidth = 1
var dotHeight = 3

// Heatmap ellipes
svg.selectAll("ellipse")
    .data(dataset)
    .enter()
    .append("ellipse")
    .attr("cx", function(d) { return xScale(d.day) + paddingLeft; })
    .attr("cy", function(d) { return yScale(d.hour); })
    .attr("rx", dotWidth)
    .attr("ry", dotHeight)
    .attr("fill", function(d) {
        return "rgba(100, 200, 200, " + colorScale(d.tOutC) + ")";
    });

创建缩放：

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 3])
    .x(xScale)
    .on("zoom", zoomHandler);

function zoomHandler() {
    var t = zoom.translate(),
        tx = t[0],
        ty = t[1];

    tx = Math.min(tx, 0); // tx < 0
    tx = Math.max(tx,  -1000); //
    zoom.translate([tx, ty]);

    svg.select(".x.axis").call(xAxis);
    svg.selectAll("ellipse")
        .attr("cx", function(d) { return xScale(d.day) + paddingLeft; })
        .attr("cy", function(d) { return yScale(d.hour); });
}

Answer 1

我认为您为椭圆创建了新的 x 和 y 位置，但实际上并没有改变它们的半径。对于一个圆圈，它是这样工作的：

var scaleMultiplier = d3.event.scale;

圈子 .attr("cx", 函数(d, i) { return xAxisScale(d.cx); }) .attr("cy", function(d, i) { return yAxisScale(d.cy); }) .attr("r", function(d, i) { return (d.radius * scaleMultiplier); }); }

缩放时更改椭圆的宽度

Change width of ellipse when zooming

d3.js

zooming