javascript - D3.js 按下按钮后移动一条线和一个圆圈

Question

我的代码的 JSFiddle 位于此 URL http://jsfiddle.net/b8eLJ/1/

在代码中，我实现了一个后退按钮。目标是 x 轴上的日历应该及时返回。当发生这种情况时，线条也应该及时向后移动。

我的 x 轴与新域一起正常工作 - 但我在处理线条和圆圈时遇到了困难。

我还查看了以下示例 http://bl.ocks.org/mbostock/1166403

我对如何“选择线并移动它”或“销毁线并重新创建它”感到有点困惑。我都试过了，但似乎都不起作用。

function startFunction() {

console.log("start");

endDate.setDate(endDate.getDate() - 7);
startDate.setDate(startDate.getDate() - 7);

//change the domain to reflect the new dates
xScale.domain([startDate, endDate]);

var t = svg.transition().duration(750);
t.select(".x.axis").call(xAxis);

//???
var pl = svg.selectAll("path.line");

pl.exit().remove();
}

// INPUT
dataset2 = [{
movie: "test",
results: [{
    week: "20140102",
    revenue: "5"
}, {
    week: "20140109",
    revenue: "10"
}, {
    week: "20140116",
    revenue: "17"
}, ]
}, {
movie: "test",
results: [{
    week: "20140206",
    revenue: "31"
}, {
    week: "20140213",
    revenue: "42"
}]
}];

console.log("1");

var parseDate = d3.time.format("%Y%m%d").parse;

var lineFunction = d3.svg.line()
.x(function (d) {
return xScale(parseDate(String(d.week)));
})
.y(function (d) {
return yScale(d.revenue);
})
.interpolate("linear");

console.log("2");


var endDate = new Date();
var startDate = new Date();
startDate.setDate(startDate.getDate() - 84);



//SVG Width and height

var margin = {
top: 20,
right: 10,
bottom: 20,
left: 40
};

var w = 750 - margin.left - margin.right;
var h = 250 - margin.top - margin.bottom;


//X SCALE AND AXIS STUFF

//var xMin = 0;
//var xMax = 1000;




var xScale = d3.time.scale()
.domain([startDate, endDate])
.range([0, w]);

console.log(parseDate("20130101"));
console.log("3");

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(12);

console.log("4S");

//Y SCALE AND AXIS STUFF

//max and min test

var minY = d3.min(dataset2, function (kv) {
return d3.min(kv.results, function (d) {
    return +d.revenue;
})
});

var maxY = d3.max(dataset2, function (kv) {
return d3.max(kv.results, function (d) {
    return +d.revenue;
})
});


console.log("min y " + minY);
console.log("max y " + maxY);


var yScale = d3.scale.linear()
.domain([minY, maxY])
.range([h, 0]);

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);

//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


console.log("4S1");

//CREATE X-AXIS
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h) + ")")
.call(xAxis);

//Create Y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(,0)")
.call(yAxis);

//create circle

var movie_groups = svg.selectAll("g.metric_group")
.data(dataset2).enter()
.append("g")
.attr("class", "metric_group");

var circles = movie_groups.selectAll("circle")
.data(function (d) {
return d.results;
});


svg.selectAll("g.circle")
.data(dataset2)
.enter()
.append("g")
.attr("class", "circle")
.selectAll("circle")
.data(function (d) {
return d.results;
})
.enter()
.append("circle")
.attr("cx", function (d) {
//      console.log(d[0]);
console.log(parseDate(d.week));
return xScale(parseDate(d.week));
})
.attr("cy", function (d) {
return yScale(d.revenue);
})
.attr("r", 3);


//create line

//create line
var lineGraph = svg.selectAll("path.line")
.data(dataset2).enter().append("path")
.attr("d", function (d) {
return lineFunction(d.results);
})
.attr("class", "line");

Answer 1

需要澄清的是，向后移动的线条实际上会转化为向右前进的线条，因为它们的日期没有改变并且时间轴向右移动。我希望我在这里想清楚……已经晚了。

重要的是，您的数据不会在点击之间发生变化，因此在初始调用后，不会有新数据绑定(bind)到 enter() 选择中。线条将绘制一次且仅绘制一次。

因为你的轴是可移动的部分，一个快速的解决方案是不断删除线并在 startFunction 中再次重建它们，如下所示:

var lineGraph = svg.selectAll("path.line").remove();
lineGraph = svg.selectAll("path.line")
    .data(dataset2);

我试过了，效果很好。但请注意，我没有删除退出选择的行，因此没有真正利用 EUE 模式(进入/更新/退出)。但是，由于您的数据并没有真正发生变化，我不确定您可以在点击之间添加什么可以用作 selection.data 的键。我希望这有助于...

注意:我不是特别喜欢这个解决方案，并考虑将其写为评论，但冗长的文字太多了。一方面，object constancy因为我们偏离了 EUE 模式并且“图形运动”是丑陋的，所以丢失了。这可以通过在线条(路径)的绘制中添加过渡延迟来缓解一些，如下所示......但仍然......

lineGraph.enter().append("path").transition().delay(750)
    .attr("d", function (d) {
        return lineFunction(d.results);
    })