Question

我正在尝试使用缩放和平移功能在D3js中创建热图。到目前为止，我的平移功能正常工作，但我对缩放功能有一个小问题。

缩放功能只应在x轴方向上进行缩放（拉伸/挤压），此时此刻。现在，热图的初始视图 - 当我加载脚本时 - 向我展示了带有挤压点的整个数据集，这就是我想要的。问题是当我放大时挤压的点会受到挤压，这导致它们之间存在巨大的间隙。我想要的是缩放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); });
}

缩放时更改椭圆的宽度

0 个答案: