D3:正在缩放/缩放的轴，而不是多线图.如何解决此问题

d3: axes being scaled/zoomed, not multi-line graph. How can I fix this issue?

本文关键字：缩放 何解决 解决 问题 D3      更新时间：2023-09-26

我在 x 轴上绘制日期与 y 轴上的累积整数。我一直在尝试实现一个功能，以便能够缩放/放大图形以及移动它。但是，我没有这样做 - 轴正在改变，但图形没有。

这是我的代码：

var parseDate = d3.time.format("%d/%m/%Y").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");//.tickSize(-height);
var yAxis = d3.svg.axis().scale(y)
.orient("left");//.ticks(5);
// Define the line
var cumulativeline = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.cumulative); });
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right + 250)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", 
        "translate(" + margin.left  + "," + margin.top + ")");
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
// Get the data
d3.csv("file.csv", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.cumulative = +d.cumulative;
});
var dataNest = d3.nest()
    .key(function(d) {return d.a_tradeidtype;})
    .entries(data);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.cumulative; })]);
// Loop through each a_tradeidtype / key
dataNest.forEach(function(d,i) { 
svg.append("path")
        .style("stroke", function() { // Add the colours dynamically
            return d.color = color(d.key); })
        .attr("class", classname)
        .attr("d", cumulativeline(d.values))
        .attr("clip-path", "url(#clip)");
});
// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
// Create zooming component
var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 10])
    .on('zoom', zoomed);
svg.call(zoom);
});
function zoomed() {
  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);
}

我做错了什么？

您不会在"缩放"中更新线条，只会更新轴。函数中需要这样的东西：

svg.selectAll("path")
        .attr("d", function(d) { return cumulativeline(d.values); })
;

我还怀疑您可能需要将原始附加例程更改为如下所示的内容，以便将数据连接到每个路径，以便上面的代码可以工作：

// Loop through each a_tradeidtype / key
svg.selectAll("path").data(dataNest)
        .enter()
        .append("path")
        .style("stroke", function(d) { // Add the colours dynamically
            return d.color = color(d.key); })
        .attr("class", classname)
        .attr("d", function(d) { return cumulativeline(d.values); })
        .attr("clip-path", "url(#clip)")
;

如果这不起作用，请将您的代码粘贴在 jsfiddle 中

相关文章：