D3.js 图表在D3中放大

下面是我的代码，用于绘制具有缩放功能的折线图。但是问题是，当我放大光标时，光标不会停留在同一点上。我想放大鼠标光标的位置（我希望我足够清楚）

下面是JSFIDLE：

---

我明白了。我必须在

g

元素上使用

.call（zoom）

，并且我还添加了另一个矩形，以便在鼠标光标位于图表区域的任何位置时触发缩放

---

谢谢分享，觉得这很有帮助。一个问题：为什么这里有两个代码基本相同的独立变量（即var make_x_轴和xAxis）？我意识到添加一个非函数+返回的细微差别，但为什么要这样做呢？Thanks@DeBraid没有理由，我忘了重构。感谢您的注意，我编辑了代码。当我点击Run时，代码没有显示任何内容，知道为什么是@Strudel吗？谢谢：）

width = 400 - margin.left - margin.right;
height = 200 - margin.top - margin.bottom;

var x = d3.time.scale()
    .domain(d3.extent(data, function (d) {
    return d.date;
}))
    .range([0, width]);

var y = d3.scale.linear()
    .domain(d3.extent(data, function (d) {
    return d.value;
}))
    .range([height, 0]);

var line = d3.svg.line()
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.value);
});

var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .on("zoom", zoomed);

svg = d3.select('#chart')
    .append("svg:svg")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .call(zoom)
    .append("svg:g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var make_x_axis = function () {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5);
};

var make_y_axis = function () {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5);
};

var xAxis = make_x_axis();

svg.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxis);

var yAxis = make_y_axis();

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class", "x grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));

svg.append("g")
    .attr("class", "y grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));

var clip = svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

chartBody.append("svg:path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

function zoomed() {
    console.log(d3.event.translate);
    console.log(d3.event.scale);
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.select(".x.grid")
        .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat(""));
    svg.select(".y.grid")
        .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat(""));
    svg.select(".line")
        .attr("class", "line")
        .attr("d", line);
}

svg = d3.select('#chart')
    .append("svg:svg")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append("svg:g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");