zooming - d3.js 缩放 xScale/xAxis

标签 zooming d3.js

我正在尝试创建一个允许缩放功能的简单图表,到目前为止我发现的示例手动生成轴和刻度:http://bl.ocks.org/1182434

然而,我使用的是内置轴对象,我不知道如何转换比例以使其工作 - 有什么想法吗?

var xScale = d3.scale.linear().
    domain([0, 80]). // your data minimum and maximum
    range([0, width]); // the pixels to map to, e.g., the width of the diagram.

var yScale = d3.scale.linear().
    domain([100, 0]). 
    range([0, height]); 

var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(10, d3.format(",d")),
    yAxis = d3.svg.axis().orient("left").scale(yScale);


var chart = d3.select("#chart").append("svg")
    .attr("class", "chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("pointer-events", "all")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append("g")

chart.append('svg:rect')
    .attr('width', width)
    .attr('height', height)
    .attr('fill', 'white');

// x-axis
var xaxis = chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// y-axis
var yaxis = chart.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// omitted code to draw the path, it's just a path object that uses a line and passes data to it

function redraw() 
{
    console.log("here", d3.event.translate, d3.event.scale);
    path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

    // d3.event.transform(xScale, yScale);
    // HERE is where I need to figure out how to scale the x and y axes!    

    xAxis.scale(xScale);
    yAxis.scale(yScale);

    xaxis.call(xAxis);
    yaxis.call(yAxis);
}

最佳答案

这就是我最终这样做的方式,以防有人感兴趣:

function redraw() 
{

    console.log("here", d3.event.translate, d3.event.scale);
    path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");     

    var xoffset = (xMax + xMin) / 2;
    var yoffset = (yMax + yMin) / 2;

    var xTemp = [(0 - xoffset) * (1/d3.event.scale), (0 + xoffset) * (1/d3.event.scale)];
    var yTemp = [(0 - yoffset) * (1/d3.event.scale), (0 + yoffset) * (1/d3.event.scale)];

    xMin = xTemp[0] + xoffset;
    xMax = xTemp[1] + xoffset;
    yMin = yTemp[0] + yoffset;
    yMax = yTemp[1] + yoffset;

    console.log("", xMin, xMax, yMin, yMax);

    xScale.domain([xMin, xMax]);
    yScale.domain([yMax, yMin]);

    xaxis.call(xAxis);
    yaxis.call(yAxis);

    path.attr("d", line)
        .attr("transform", null)
        .transition()       
        .ease("linear")     
        ;
}

请注意,我还必须设置比例限制:

var chart = d3.select("#chart").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().scaleExtent([0.2, 5]).on("zoom", redraw))
.append("g");

关于zooming - d3.js 缩放 xScale/xAxis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10433951/

相关文章:

javascript - 谷歌地图鼠标滚轮错误

javascript - Three.js - 尝试将子窗口包含到主窗口中

html - 使用缩放渲染表格时出现 Chrome 错误

jquery - 如何使用jquery放大图像

javascript - SVG 矩形边框,不是描边

layout - D3 : Multiple force layouts in one SVG?

html - 当我放大时,边框在 Chrome 中消失

javascript - 试图理解这个 d3 force 示例

javascript - 如何在 D3 轴和图表之间应用填充?

javascript - 为什么点击事件不总是触发?