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

为了澄清，回溯的线条实际上会转换为向右移动的线条，因为它们的日期不会改变，时间轴向右移动。我希望我在这里想清楚......已经晚了。

重要的是，您的数据在点击之间不会发生变化，因此在初始调用后，enter（）选项中不会绑定任何新数据。线条将被绘制一次且仅一次。

由于您的轴是可移动部件，因此一个快速解决方案是继续移除线并在startFunction内重新构建它们，如下所示：

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

我试过这个并且它有效。但请注意，我没有从退出选择中删除这些行，因此没有真正利用EUE模式（Enter / Update / Exit）。但是，由于您的数据并没有真正改变，我不确定您可以在可用作 selection.data 键的点击之间添加哪些内容。我希望这有帮助...

注意：我并不是特别喜欢这个解决方案，并考虑将其写成评论，但有太多的措辞。首先，由于我们偏离了EUE模式并且“图形运动”很难看，object constancy丢失了。这可以通过在线条（路径）的绘图中添加转换延迟来减轻一些，如下所示......但仍然......

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

D3.js按下按钮后移动一条线和一条圆

1 个答案: