- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的代码的 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");
最佳答案
需要澄清的是,向后移动的线条实际上会转化为向右前进的线条,因为它们的日期没有改变并且时间轴向右移动。我希望我在这里想清楚……已经晚了。
重要的是,您的数据不会在点击之间发生变化,因此在初始调用后,不会有新数据绑定(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);
})
关于javascript - D3.js 按下按钮后移动一条线和一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21804166/
如何迭代(一行)分割函数给我的每个类? 我试过这个: 编辑(抱歉) $("p").attr("class").split(' ').each (function (i,n){alert(n)}
我有一条垂直线和一条水平线,当我动态调整我的 Canvas 父级时,我想调整它们的大小。 (地标) 我希望水平线始终距 Canvas 的左右边界 25 处,距底部边界 13 处。 垂直线也是如此,距上
我有一个 y 变量,我试图在图形的顶部和底部针对两个相关的 x 轴绘制它(例如 y="立方体中的事物数",x1="立方体的边长", x2="立方体的体积")。我在 numpy 数组中有 y、x1、x2
我想画一条简单的水平线,并在这条线 flex 的地方制作动画。我有这个动画的视频。你能给我一些建议如何开始以及我必须使用哪个 js/css 吗? 都是关于矩形底部的线: http://www.stop
我是一名优秀的程序员,十分优秀!