d3：轴是 scaled/zoomed，不是多线图。我该如何解决这个问题？

Question

我在 x 轴上绘制日期，在 y 轴上绘制累积整数。我一直在尝试实现一项功能，以便能够 scale/zoom 进入图表并移动它。但是，我没有做到这一点——坐标轴在变化，但图表没有变化。

这是我的代码：

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);
}

我做错了什么？

Answer 1

您没有更新 'zoomed' 中的线条，只是更新了坐标轴。你在函数中需要这样的东西：

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 中

d3：轴是 scaled/zoomed，不是多线图。我该如何解决这个问题？

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

javascript

zooming

d3.js