我在 d3 中创建了一个带有固定 slider 的自定义图形 slider 。目前，我真的不知道如何拖动 slider ，以便您可以水平平移 future 日期或先前日期，具体取决于 slider 到达 x 轴末端或起点时的方向。
我不确定是否必须使用 call(d3.behavior.zoom().x(x).scaleExtent([1, 1])).on("zoom", Zoom);或使用画笔上的拖动事件，因为当您用鼠标拖动时通常会平移，但不确定如何在画笔移动时对画笔执行相同的操作。
如何使用具有平移功能的画笔？
非常感谢
var margin = {
top: 10,
right: 10,
bottom: 100,
left: 40
},
margin2 = {
top: 430,
right: 10,
bottom: 20,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%b %Y").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", function() {
brushed();
})
.on('brushend', brushend);
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) {
return x2(d.date);
})
.y0(height2)
.y1(function(d) {
return y2(d.price);
});
var svg = d3.select("body").append("svg")
.attr("id", "shd_context")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + 200 + ")");
var data = '[{"date":"Jan 2000","price":"1394.46"},{"date":"Feb 2000","price":"1366.42"},{"date":"Mar 2000","price":"1498.58"},{"date":"Apr 2000","price":"1452.43"},{"date":"May 2000","price":"1420.6"},{"date":"Jun 2000","price":"1454.6"},{"date":"Jul 2000","price":"1430.83"},{"date":"Aug 2000","price":"1517.68"},{"date":"Sep 2000","price":"1436.51"},{"date":"Oct 2000","price":"1429.4"},{"date":"Nov 2000","price":"1314.95"},{"date":"Dec 2000","price":"1320.28"},{"date":"Jan 2001","price":"1366.01"},{"date":"Feb 2001","price":"1239.94"},{"date":"Mar 2001","price":"1160.33"},{"date":"Apr 2001","price":"1249.46"},{"date":"May 2001","price":"1255.82"},{"date":"Jun 2001","price":"1224.38"},{"date":"Jul 2001","price":"1211.23"},{"date":"Aug 2001","price":"1133.58"},{"date":"Sep 2001","price":"1040.94"},{"date":"Oct 2001","price":"1059.78"},{"date":"Nov 2001","price":"1139.45"},{"date":"Dec 2001","price":"1148.08"},{"date":"Jan 2002","price":"1130.2"},{"date":"Feb 2002","price":"1106.73"},{"date":"Mar 2002","price":"1147.39"},{"date":"Apr 2002","price":"1076.92"},{"date":"May 2002","price":"1067.14"},{"date":"Jun 2002","price":"989.82"},{"date":"Jul 2002","price":"911.62"},{"date":"Aug 2002","price":"916.07"},{"date":"Sep 2002","price":"815.28"},{"date":"Oct 2002","price":"885.76"},{"date":"Nov 2002","price":"936.31"},{"date":"Dec 2002","price":"879.82"},{"date":"Jan 2003","price":"855.7"},{"date":"Feb 2003","price":"841.15"},{"date":"Mar 2003","price":"848.18"},{"date":"Apr 2003","price":"916.92"},{"date":"May 2003","price":"963.59"},{"date":"Jun 2003","price":"974.5"},{"date":"Jul 2003","price":"990.31"},{"date":"Aug 2003","price":"1008.01"},{"date":"Sep 2003","price":"995.97"},{"date":"Oct 2003","price":"1050.71"},{"date":"Nov 2003","price":"1058.2"},{"date":"Dec 2003","price":"1111.92"},{"date":"Jan 2004","price":"1131.13"},{"date":"Feb 2004","price":"1144.94"},{"date":"Mar 2004","price":"1126.21"},{"date":"Apr 2004","price":"1107.3"},{"date":"May 2004","price":"1120.68"},{"date":"Jun 2004","price":"1140.84"},{"date":"Jul 2004","price":"1101.72"},{"date":"Aug 2004","price":"1104.24"},{"date":"Sep 2004","price":"1114.58"},{"date":"Oct 2004","price":"1130.2"},{"date":"Nov 2004","price":"1173.82"},{"date":"Dec 2004","price":"1211.92"},{"date":"Jan 2005","price":"1181.27"},{"date":"Feb 2005","price":"1203.6"},{"date":"Mar 2005","price":"1180.59"},{"date":"Apr 2005","price":"1156.85"},{"date":"May 2005","price":"1191.5"},{"date":"Jun 2005","price":"1191.33"},{"date":"Jul 2005","price":"1234.18"},{"date":"Aug 2005","price":"1220.33"},{"date":"Sep 2005","price":"1228.81"},{"date":"Oct 2005","price":"1207.01"},{"date":"Nov 2005","price":"1249.48"},{"date":"Dec 2005","price":"1248.29"},{"date":"Jan 2006","price":"1280.08"},{"date":"Feb 2006","price":"1280.66"},{"date":"Mar 2006","price":"1294.87"},{"date":"Apr 2006","price":"1310.61"},{"date":"May 2006","price":"1270.09"},{"date":"Jun 2006","price":"1270.2"},{"date":"Jul 2006","price":"1276.66"},{"date":"Aug 2006","price":"1303.82"},{"date":"Sep 2006","price":"1335.85"},{"date":"Oct 2006","price":"1377.94"},{"date":"Nov 2006","price":"1400.63"},{"date":"Dec 2006","price":"1418.3"},{"date":"Jan 2007","price":"1438.24"},{"date":"Feb 2007","price":"1406.82"},{"date":"Mar 2007","price":"1420.86"},{"date":"Apr 2007","price":"1482.37"},{"date":"May 2007","price":"1530.62"},{"date":"Jun 2007","price":"1503.35"},{"date":"Jul 2007","price":"1455.27"},{"date":"Aug 2007","price":"1473.99"},{"date":"Sep 2007","price":"1526.75"},{"date":"Oct 2007","price":"1549.38"},{"date":"Nov 2007","price":"1481.14"},{"date":"Dec 2007","price":"1468.36"},{"date":"Jan 2008","price":"1378.55"},{"date":"Feb 2008","price":"1330.63"},{"date":"Mar 2008","price":"1322.7"},{"date":"Apr 2008","price":"1385.59"},{"date":"May 2008","price":"1400.38"},{"date":"Jun 2008","price":"1280"},{"date":"Jul 2008","price":"1267.38"},{"date":"Aug 2008","price":"1282.83"},{"date":"Sep 2008","price":"1166.36"},{"date":"Oct 2008","price":"968.75"},{"date":"Nov 2008","price":"896.24"},{"date":"Dec 2008","price":"903.25"},{"date":"Jan 2009","price":"825.88"},{"date":"Feb 2009","price":"735.09"},{"date":"Mar 2009","price":"797.87"},{"date":"Apr 2009","price":"872.81"},{"date":"May 2009","price":"919.14"},{"date":"Jun 2009","price":"919.32"},{"date":"Jul 2009","price":"987.48"},{"date":"Aug 2009","price":"1020.62"},{"date":"Sep 2009","price":"1057.08"},{"date":"Oct 2009","price":"1036.19"},{"date":"Nov 2009","price":"1095.63"},{"date":"Dec 2009","price":"1115.1"},{"date":"Jan 2010","price":"1073.87"},{"date":"Feb 2010","price":"1104.49"},{"date":"Mar 2010","price":"1140.45"}]';
data = JSON.parse(data).map(type);
x.domain(d3.extent(data.map(function(d) {
return d.date;
})));
y.domain([0, d3.max(data.map(function(d) {
return d.price;
}))]);
x2.domain(x.domain());
y2.domain(y.domain());
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.call(d3.behavior.zoom().x(x2).scaleExtent([1, 1]))
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2)
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7)
.attr("width", 20)
.on("mouseover", function(d) {
d3.select("#tooltip")
.style("left", d3.select("#shd_context")[0][0].children[1].children[2].children[0].x.animVal.value + "px")
.style("top", (d3.event.pageY - 125) + "px")
.style("opacity", 1)
.select("#value")
.html("<p> " + moment(brush.extent()[0]).format("YYYY-MM-DD") + " and <br> " + moment(brush.extent()[1]).format("YYYY-MM-DD") + "</p>");
})
.on("mouseout", function() {
// Hide the tooltip
d3.select("#tooltip")
.style("opacity", 0);
})
.call(d3.behavior.zoom().x(x).scaleExtent([1, 1])).on("zoom", zoom);
var resize = context
.select('.brush');
resize.selectAll('.resize')
.remove();
context.selectAll('.resize');
resize.select('.background')
.remove();
brush.extent([new Date("2010-01-01"), new Date("2010-02-01")])
brush(resize);
brush.event(resize);
function brushed() {
var s = d3.event.target.extent();
var brushDomain = brush.extent();
brush.extent([brushDomain[0], brushDomain[1]])
x.domain(brush.empty() ? x2.domain() : brush.extent());
d3.select("#tooltip")
.style("left", d3.select("#shd_context")[0][0].children[1].children[2].children[0].x.animVal.value + "px")
.style("top", (d3.event.pageY - 125) + "px")
.style("opacity", 1)
.select("#value")
.html("<p> " + moment(brush.extent()[0]).format("YYYY-MM-DD") + " and <br> " + moment(brush.extent()[1]).format("YYYY-MM-DD") + "</p>");
zoom();
}
//brushend values collected
function brushend() {
var brushDomain = brush.extent();
console.log("start: " + moment(brushDomain[0]).format("YYYY-MM-DD") + " end: " + moment(brushDomain[1]).format("YYYY-MM-DD"));
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
d3.select("#tooltip")
.style("opacity", 0);
}
function zoom() {
context.select(".area").attr("d", area2);
context.select(".x.axis").call(xAxis2);
}
function type(d) {
d.date = parseDate(d.date);
d.price = +d.price;
return d;
}svg {
font: 10px sans-serif;
}
.area {
fill: steelblue;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: black;
fill-opacity: .125;
shape-rendering: crispEdges;
position: relative;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
opacity: 0;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}<div id="tooltip" data-html="true" class="hidden">
<p><strong>Dates between: </strong>
</p>
<p id="value" data-html="true"></p>
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>最佳答案
我已经解决了制作我自己的自定义图形 slider 的问题。我最初关于使用行为缩放的研究是错误的。在更深入的搜索时，我发现this 。
现在使用该链接，我了解到我需要更新我的域、路径和 x 轴，而不是使用 d3 缩放方法。缩放行为仅影响整个 svg，并且在移动画笔时无法使用缩放
下面是正确的代码
var data = '[{"date":"Jan 2000","price":"1394.46"},{"date":"Feb 2000","price":"1366.42"},{"date":"Mar 2000","price":"1498.58"},{"date":"Apr 2000","price":"1452.43"},{"date":"May 2000","price":"1420.6"},{"date":"Jun 2000","price":"1454.6"},{"date":"Jul 2000","price":"1430.83"},{"date":"Aug 2000","price":"1517.68"},{"date":"Sep 2000","price":"1436.51"},{"date":"Oct 2000","price":"1429.4"},{"date":"Nov 2000","price":"1314.95"},{"date":"Dec 2000","price":"1320.28"},{"date":"Jan 2001","price":"1366.01"},{"date":"Feb 2001","price":"1239.94"},{"date":"Mar 2001","price":"1160.33"},{"date":"Apr 2001","price":"1249.46"},{"date":"May 2001","price":"1255.82"},{"date":"Jun 2001","price":"1224.38"},{"date":"Jul 2001","price":"1211.23"},{"date":"Aug 2001","price":"1133.58"},{"date":"Sep 2001","price":"1040.94"},{"date":"Oct 2001","price":"1059.78"},{"date":"Nov 2001","price":"1139.45"},{"date":"Dec 2001","price":"1148.08"},{"date":"Jan 2002","price":"1130.2"},{"date":"Feb 2002","price":"1106.73"},{"date":"Mar 2002","price":"1147.39"},{"date":"Apr 2002","price":"1076.92"},{"date":"May 2002","price":"1067.14"},{"date":"Jun 2002","price":"989.82"},{"date":"Jul 2002","price":"911.62"},{"date":"Aug 2002","price":"916.07"},{"date":"Sep 2002","price":"815.28"},{"date":"Oct 2002","price":"885.76"},{"date":"Nov 2002","price":"936.31"},{"date":"Dec 2002","price":"879.82"},{"date":"Jan 2003","price":"855.7"},{"date":"Feb 2003","price":"841.15"},{"date":"Mar 2003","price":"848.18"},{"date":"Apr 2003","price":"916.92"},{"date":"May 2003","price":"963.59"},{"date":"Jun 2003","price":"974.5"},{"date":"Jul 2003","price":"990.31"},{"date":"Aug 2003","price":"1008.01"},{"date":"Sep 2003","price":"995.97"},{"date":"Oct 2003","price":"1050.71"},{"date":"Nov 2003","price":"1058.2"},{"date":"Dec 2003","price":"1111.92"},{"date":"Jan 2004","price":"1131.13"},{"date":"Feb 2004","price":"1144.94"},{"date":"Mar 2004","price":"1126.21"},{"date":"Apr 2004","price":"1107.3"},{"date":"May 2004","price":"1120.68"},{"date":"Jun 2004","price":"1140.84"},{"date":"Jul 2004","price":"1101.72"},{"date":"Aug 2004","price":"1104.24"},{"date":"Sep 2004","price":"1114.58"},{"date":"Oct 2004","price":"1130.2"},{"date":"Nov 2004","price":"1173.82"},{"date":"Dec 2004","price":"1211.92"},{"date":"Jan 2005","price":"1181.27"},{"date":"Feb 2005","price":"1203.6"},{"date":"Mar 2005","price":"1180.59"},{"date":"Apr 2005","price":"1156.85"},{"date":"May 2005","price":"1191.5"},{"date":"Jun 2005","price":"1191.33"},{"date":"Jul 2005","price":"1234.18"},{"date":"Aug 2005","price":"1220.33"},{"date":"Sep 2005","price":"1228.81"},{"date":"Oct 2005","price":"1207.01"},{"date":"Nov 2005","price":"1249.48"},{"date":"Dec 2005","price":"1248.29"},{"date":"Jan 2006","price":"1280.08"},{"date":"Feb 2006","price":"1280.66"},{"date":"Mar 2006","price":"1294.87"},{"date":"Apr 2006","price":"1310.61"},{"date":"May 2006","price":"1270.09"},{"date":"Jun 2006","price":"1270.2"},{"date":"Jul 2006","price":"1276.66"},{"date":"Aug 2006","price":"1303.82"},{"date":"Sep 2006","price":"1335.85"},{"date":"Oct 2006","price":"1377.94"},{"date":"Nov 2006","price":"1400.63"},{"date":"Dec 2006","price":"1418.3"},{"date":"Jan 2007","price":"1438.24"},{"date":"Feb 2007","price":"1406.82"},{"date":"Mar 2007","price":"1420.86"},{"date":"Apr 2007","price":"1482.37"},{"date":"May 2007","price":"1530.62"},{"date":"Jun 2007","price":"1503.35"},{"date":"Jul 2007","price":"1455.27"},{"date":"Aug 2007","price":"1473.99"},{"date":"Sep 2007","price":"1526.75"},{"date":"Oct 2007","price":"1549.38"},{"date":"Nov 2007","price":"1481.14"},{"date":"Dec 2007","price":"1468.36"},{"date":"Jan 2008","price":"1378.55"},{"date":"Feb 2008","price":"1330.63"},{"date":"Mar 2008","price":"1322.7"},{"date":"Apr 2008","price":"1385.59"},{"date":"May 2008","price":"1400.38"},{"date":"Jun 2008","price":"1280"},{"date":"Jul 2008","price":"1267.38"},{"date":"Aug 2008","price":"1282.83"},{"date":"Sep 2008","price":"1166.36"},{"date":"Oct 2008","price":"968.75"},{"date":"Nov 2008","price":"896.24"},{"date":"Dec 2008","price":"903.25"},{"date":"Jan 2009","price":"825.88"},{"date":"Feb 2009","price":"735.09"},{"date":"Mar 2009","price":"797.87"},{"date":"Apr 2009","price":"872.81"},{"date":"May 2009","price":"919.14"},{"date":"Jun 2009","price":"919.32"},{"date":"Jul 2009","price":"987.48"},{"date":"Aug 2009","price":"1020.62"},{"date":"Sep 2009","price":"1057.08"},{"date":"Oct 2009","price":"1036.19"},{"date":"Nov 2009","price":"1095.63"},{"date":"Dec 2009","price":"1115.1"},{"date":"Jan 2010","price":"1073.87"},{"date":"Feb 2010","price":"1104.49"},{"date":"Mar 2010","price":"1140.45"}]';
data = JSON.parse(data);
var margin = {
top: 10,
right: 10,
bottom: 100,
left: 40
},
margin2 = {
top: 430,
right: 10,
bottom: 20,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%b %Y").parse;
var x = d3.time.scale().domain([new Date(data[0].date), new Date(data[2].date)]).range([0, width]),
x2 = d3.time.scale().domain([new Date(data[0].date), new Date(data[2].date)]).range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2);
// .on("brush", brushed)
// .on('brushend', brushend);
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function (d) {
return x2(d.date);
})
.y0(height2)
.y1(function (d) {
return y2(d.price);
});
var svg = d3.select("body").append("svg")
.attr("id", "shd_context")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "hello")
.attr("width", width)
.attr("height", height);
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + 150 + ")");
var data = '[{"date":"Jan 2000","price":"1394.46"},{"date":"Feb 2000","price":"1366.42"},{"date":"Mar 2000","price":"1498.58"},{"date":"Apr 2000","price":"1452.43"},{"date":"May 2000","price":"1420.6"},{"date":"Jun 2000","price":"1454.6"},{"date":"Jul 2000","price":"1430.83"},{"date":"Aug 2000","price":"1517.68"},{"date":"Sep 2000","price":"1436.51"},{"date":"Oct 2000","price":"1429.4"},{"date":"Nov 2000","price":"1314.95"},{"date":"Dec 2000","price":"1320.28"},{"date":"Jan 2001","price":"1366.01"},{"date":"Feb 2001","price":"1239.94"},{"date":"Mar 2001","price":"1160.33"},{"date":"Apr 2001","price":"1249.46"},{"date":"May 2001","price":"1255.82"},{"date":"Jun 2001","price":"1224.38"},{"date":"Jul 2001","price":"1211.23"},{"date":"Aug 2001","price":"1133.58"},{"date":"Sep 2001","price":"1040.94"},{"date":"Oct 2001","price":"1059.78"},{"date":"Nov 2001","price":"1139.45"},{"date":"Dec 2001","price":"1148.08"},{"date":"Jan 2002","price":"1130.2"},{"date":"Feb 2002","price":"1106.73"},{"date":"Mar 2002","price":"1147.39"},{"date":"Apr 2002","price":"1076.92"},{"date":"May 2002","price":"1067.14"},{"date":"Jun 2002","price":"989.82"},{"date":"Jul 2002","price":"911.62"},{"date":"Aug 2002","price":"916.07"},{"date":"Sep 2002","price":"815.28"},{"date":"Oct 2002","price":"885.76"},{"date":"Nov 2002","price":"936.31"},{"date":"Dec 2002","price":"879.82"},{"date":"Jan 2003","price":"855.7"},{"date":"Feb 2003","price":"841.15"},{"date":"Mar 2003","price":"848.18"},{"date":"Apr 2003","price":"916.92"},{"date":"May 2003","price":"963.59"},{"date":"Jun 2003","price":"974.5"},{"date":"Jul 2003","price":"990.31"},{"date":"Aug 2003","price":"1008.01"},{"date":"Sep 2003","price":"995.97"},{"date":"Oct 2003","price":"1050.71"},{"date":"Nov 2003","price":"1058.2"},{"date":"Dec 2003","price":"1111.92"},{"date":"Jan 2004","price":"1131.13"},{"date":"Feb 2004","price":"1144.94"},{"date":"Mar 2004","price":"1126.21"},{"date":"Apr 2004","price":"1107.3"},{"date":"May 2004","price":"1120.68"},{"date":"Jun 2004","price":"1140.84"},{"date":"Jul 2004","price":"1101.72"},{"date":"Aug 2004","price":"1104.24"},{"date":"Sep 2004","price":"1114.58"},{"date":"Oct 2004","price":"1130.2"},{"date":"Nov 2004","price":"1173.82"},{"date":"Dec 2004","price":"1211.92"},{"date":"Jan 2005","price":"1181.27"},{"date":"Feb 2005","price":"1203.6"},{"date":"Mar 2005","price":"1180.59"},{"date":"Apr 2005","price":"1156.85"},{"date":"May 2005","price":"1191.5"},{"date":"Jun 2005","price":"1191.33"},{"date":"Jul 2005","price":"1234.18"},{"date":"Aug 2005","price":"1220.33"},{"date":"Sep 2005","price":"1228.81"},{"date":"Oct 2005","price":"1207.01"},{"date":"Nov 2005","price":"1249.48"},{"date":"Dec 2005","price":"1248.29"},{"date":"Jan 2006","price":"1280.08"},{"date":"Feb 2006","price":"1280.66"},{"date":"Mar 2006","price":"1294.87"},{"date":"Apr 2006","price":"1310.61"},{"date":"May 2006","price":"1270.09"},{"date":"Jun 2006","price":"1270.2"},{"date":"Jul 2006","price":"1276.66"},{"date":"Aug 2006","price":"1303.82"},{"date":"Sep 2006","price":"1335.85"},{"date":"Oct 2006","price":"1377.94"},{"date":"Nov 2006","price":"1400.63"},{"date":"Dec 2006","price":"1418.3"},{"date":"Jan 2007","price":"1438.24"},{"date":"Feb 2007","price":"1406.82"},{"date":"Mar 2007","price":"1420.86"},{"date":"Apr 2007","price":"1482.37"},{"date":"May 2007","price":"1530.62"},{"date":"Jun 2007","price":"1503.35"},{"date":"Jul 2007","price":"1455.27"},{"date":"Aug 2007","price":"1473.99"},{"date":"Sep 2007","price":"1526.75"},{"date":"Oct 2007","price":"1549.38"},{"date":"Nov 2007","price":"1481.14"},{"date":"Dec 2007","price":"1468.36"},{"date":"Jan 2008","price":"1378.55"},{"date":"Feb 2008","price":"1330.63"},{"date":"Mar 2008","price":"1322.7"},{"date":"Apr 2008","price":"1385.59"},{"date":"May 2008","price":"1400.38"},{"date":"Jun 2008","price":"1280"},{"date":"Jul 2008","price":"1267.38"},{"date":"Aug 2008","price":"1282.83"},{"date":"Sep 2008","price":"1166.36"},{"date":"Oct 2008","price":"968.75"},{"date":"Nov 2008","price":"896.24"},{"date":"Dec 2008","price":"903.25"},{"date":"Jan 2009","price":"825.88"},{"date":"Feb 2009","price":"735.09"},{"date":"Mar 2009","price":"797.87"},{"date":"Apr 2009","price":"872.81"},{"date":"May 2009","price":"919.14"},{"date":"Jun 2009","price":"919.32"},{"date":"Jul 2009","price":"987.48"},{"date":"Aug 2009","price":"1020.62"},{"date":"Sep 2009","price":"1057.08"},{"date":"Oct 2009","price":"1036.19"},{"date":"Nov 2009","price":"1095.63"},{"date":"Dec 2009","price":"1115.1"},{"date":"Jan 2010","price":"1073.87"},{"date":"Feb 2010","price":"1104.49"},{"date":"Mar 2010","price":"1140.45"}]';
data = JSON.parse(data).map(type);
x.domain([new Date(data[data.length - 15].date), new Date("2009-11-05")]);
y.domain([0, d3.max(data.map(function (d) {
return d.price;
}))]);
x2.domain(x.domain());
y2.domain(y.domain());
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2(data));
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7)
.attr("width", 20)
.on("mouseover", function (d) {
d3.select("#tooltip")
.style("left", d3.select("#shd_context")[0][0].children[1].children[2].children[0].x.animVal.value + "px")
.style("top", (d3.event.pageY - 125) + "px")
.style("opacity", 1)
.select("#value")
.html("<p> " + moment(brush.extent()[0]).format("YYYY-MM-DD") + " and <br> " + moment(brush.extent()[1]).format("YYYY-MM-DD") + "</p>");
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
})
.on("mouseout", function () {
// Hide the tooltip
d3.select("#tooltip")
.style("opacity", 0);
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
});
var resize = context
.select('.brush');
resize.selectAll('.resize')
.remove();
context.selectAll('.resize');
resize.select('.background')
.remove();
brush.extent([new Date("2009-09-05"), new Date("2009-10-05")])
brush(resize);
brush.event(resize);
d3.selectAll(".extent").call(d3.behavior.drag().on("drag", brushed).on("dragend", brushend));
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
function brushed() {
//var s = d3.event.target.extent();
var brushDomain = brush.extent();
brush.extent([brushDomain[0], brushDomain[1]])
tooltip();
var domain = x2.domain();
if (domain[1].getTime() == brushDomain[1].getTime()) {
nextData();
} else if(domain[0].getTime() == brushDomain[0].getTime()) {
previousData();
}
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
}
//brushend values collected
function brushend() {
var brushDomain = brush.extent();
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
d3.select("#tooltip")
.style("opacity", 0);
var domain = x2.domain();
if (domain[1].getTime() == brushDomain[1].getTime()) {
nextData();
}
}
function tooltip() {
d3.select("#tooltip")
.style("left", d3.select("#shd_context")[0][0].children[1].children[2].children[0].x.animVal.value + "px")
.style("top", (d3.event.pageY - 125) + "px")
.style("opacity", 1)
.select("#value")
.html("<p> " + moment(brush.extent()[0]).format("YYYY-MM-DD") + " and <br> " + moment(brush.extent()[1]).format("YYYY-MM-DD") + "</p>");
}
function type(d) {
d.date = parseDate(d.date);
d.price = +d.price;
return d;
}
//updating path area, x-axis and domain when the brush moves to future dates direction
function nextData() {
//updated x domain
var domain = x2.domain();
var firstDomain = new Date(domain[0].setDate(domain[0].getDate() + 10));
var secondDomain = new Date(domain[1].setDate(domain[1].getDate() + 10));
x2.domain([firstDomain, secondDomain]);
x.domain([firstDomain, secondDomain]);
tooltip();
var svg = d3.select("#shd_context").transition();
svg.select(".context").select(".area")
.duration(750)
.attr("d", area2(data));
svg.select(".context").select(".x.axis")
.duration(750)
.call(xAxis2);
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
}
//updating path area, x-axis and domain when the brush moves into past dates direction
function previousData() {
//updated x domain
var domain = x2.domain();
var firstDomain = new Date(domain[0].setDate(domain[0].getDate() - 10));
var secondDomain = new Date(domain[1].setDate(domain[1].getDate() - 10));
x2.domain([firstDomain, secondDomain]);
x.domain([firstDomain, secondDomain]);
tooltip();
var svg = d3.select("#shd_context").transition();
svg.select(".context").select(".area")
.duration(750)
.attr("d", area2(data));
svg.select(".context").select(".x.axis")
.duration(750)
.call(xAxis2);
d3.select("#shd_context")[0][0].children[1].children[2].style.cssText = '-webkit-tap-highlight-color: rgba(0, 0, 0, 0);';
}svg {
font: 10px sans-serif;
}
.area {
fill: steelblue;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: black;
fill-opacity: .125;
shape-rendering: crispEdges;
position: relative;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
opacity: 0;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style><script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="tooltip" data-html="true" class="hidden">
<p><strong>Dates between: </strong>
</p>
<p id="value" data-html="true"></p>
</div>关于javascript - D3 自定义图形 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45130079/