变焦时改变椭圆的宽度

我想在D3js中用缩放和平移功能创建一个热图。到目前为止，我的pan功能可以正常工作，但我在缩放功能方面存在一些小问题。变焦时改变椭圆的宽度

缩放功能只能在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); }); 
}

来源

2015-04-22 Christoffer

我想你创建新的x和y坐标为椭圆，但实际上didn't改变他们的半径。对于圆形它的工作原理一样，：

var scaleMultiplier = d3.event.scale;

圆圈 .attr（ “CX”，函数（d，i）的{返回xAxisScale（d.cx）;}） .attr（ “CY”，功能（d，i）{return yAxisScale（d.cy）;}） .attr（“r”，function（d，i）{return（d.radius * scaleMultiplier）;}）; }

来源

2015-04-22 16:02:28 Karolinka

谢谢@Karolinka，帮助我。我其实只需要将'.attr（“rx”，function（d）{return（dotWidth * d3.event.scale）;}）'添加到zoomHandler函数中。 – Christoffer

变焦时改变椭圆的宽度

回答

相关问题