Javascript D3形状跟随路径
嗨，这是我的第一篇帖子。我已经搜索了一个很好的教程来帮助完成这个D3折线图-但还没有找到我要找的。我所需要做的就是让橙色的圆圈沿着虚线的路径走。目前它有一条笔直的道路。谢谢你在这方面的帮助Javascript D3形状跟随路径,javascript,d3.js,charts,Javascript,D3.js,Charts,嗨，这是我的第一篇帖子。我已经搜索了一个很好的教程来帮助完成这个D3折线图-但还没有找到我要找的。我所需要做的就是让橙色的圆圈沿着虚线的路径走。目前它有一条笔直的道路。谢谢你在这方面的帮助 <!DOCTYPE html> <!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]--> <!--[if lt IE 9]><html class="no-js lte-ie8">
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
<html lang="en"><!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Drawdown line chart</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {font: 15px sans-serif;}
.container{max-width:990px}
h2{float:left; width:100%; text-align:center; font-size:30px; color:#666666; margin:20px 0 30px}
.highlight{color:#f26522}
#chart{width:90%; margin:0 10%}
.domain {fill: none; stroke: gray; stroke-width: 1;}
</style>
</head>
<body>
<div class="container">
<h2>Click the <span class="highlight">orange dot</span> to start:</h2>
<div class="row">
<div id="chart" class="col-sm-12">
</div>
</div>
</div>
<script type="text/javascript">
// Chart data
var dataArray = [
{"x":0, "y":100000},
{"x":1, "y":90000},
{"x":2, "y":83000},
{"x":3, "y":73000},
{"x":4, "y":79000},
{"x":5, "y":72000},
{"x":6, "y":75000},
{"x":7, "y":88000},
{"x":8, "y":63000},
{"x":9, "y":71000},
{"x":10, "y":69000},
{"x":11, "y":63000},
{"x":12, "y":67000},
{"x":13, "y":63000},
{"x":14, "y":59000},
{"x":15, "y":46000},
{"x":16, "y":40000},
{"x":17, "y":32000},
{"x":18, "y":29000},
{"x":19, "y":20000},
{"x":20, "y":18000},
{"x":21, "y":17000},
{"x":22, "y":9000},
{"x":23, "y":0},
{"x":24, "y":0},
{"x":25, "y":0},
{"x":26, "y":0},
{"x":27, "y":0},
{"x":28, "y":0},
{"x":29, "y":0},
{"x":30, "y":0}
];
// Variables
var currentAge = 65
var longevity = 92
var yearsToLive = longevity - currentAge
var years = dataArray.length
var totalDrawdown = dataArray[0].y
var chartWidth = 800
var chartHeight = 400
var chartMargin = 20
var axisHeight = 20
var widthScale = d3.scale.linear()
.domain([currentAge, currentAge + years])
.range([0, chartWidth - chartMargin]);
var axis = d3.svg.axis()
.ticks(5)
.tickSize(20)
.scale(widthScale);
// Chart scaling
x_scale = d3.scale.linear().domain([0,years]).range([0, chartWidth]);
y_scale = d3.scale.linear().domain([0,totalDrawdown]).range([chartHeight - chartMargin,0]);
var lineFunction = d3.svg.line()
.x(function(d) { return x_scale(d.x) })
.y(function(d) { return y_scale(d.y) });
function getSmoothInterpolation() {
var interpolate = d3.scale.linear()
.domain([0,1])
.range([1, dataArray.length + 1]);
return function(t) {
var flooredX = Math.floor(interpolate(t));
var interpolatedLine = dataArray.slice(0, flooredX);
if(flooredX > 0 && flooredX < dataArray.length) {
var weight = interpolate(t) - flooredX;
var weightedLineAverage = dataArray[flooredX].y * weight + dataArray[flooredX-1].y * (1-weight);
interpolatedLine.push({"x":interpolate(t)-1, "y":weightedLineAverage});
}
return lineFunction(interpolatedLine);
}
}
// Canvas
var canvas = d3.select ("#chart")
.append("svg")
.attr("width", chartWidth)
.attr("height", chartHeight + axisHeight)
.attr("id", "lineChart");
// Longevity marker
var rectangle = canvas.append("rect")
.attr("width", (chartWidth/years) * ((currentAge + years) - longevity))
.attr("height", chartHeight - chartMargin)
.attr("x", (chartWidth/years) * (longevity - currentAge) )
.attr("fill","#f2f2f2");
// Destination range
var outer = canvas.append("rect")
.attr("width", 200)
.attr("height", 10)
.attr("x", 525 )
.attr("y", 380 )
.attr("fill","#f2f2f2");
var inner = canvas.append("rect")
.attr("width", 75)
.attr("height", 10)
.attr("x", 588 )
.attr("y", 380 )
.attr("fill","#d1d1d1");
var likely = canvas.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("x", 620 )
.attr("y", 380 )
.attr("fill","#666666");
// Chart path
canvas.append("path")
.attr("stroke-width", 2)
.attr("stroke", "gray")
.attr("fill", "none")
.attr("id", "journey")
.style("stroke-dasharray", ("3, 3"))
.attr("transform", "translate(" + chartMargin + ", 0)")
// Moving circle
var marker = canvas.append("circle")
.attr("id", "marker")
.attr("cx", 5 + chartMargin)
.attr("cy", 10)
.attr("r", 10)
.attr('fill', '#f26522');
// Add x axis
canvas.append("g")
.attr("transform", "translate("+ chartMargin + "," + (chartHeight - chartMargin) + ")")
.attr("fill","#aaaaaa")
.call(axis);
// Add start button
d3.select('#lineChart')
.append('circle')
.attr("cx", 5 + chartMargin)
.attr("cy", 10)
.attr("r", 10)
.attr('fill', '#f26522')
.on('click', function() {
d3.select('#lineChart > #journey')
.transition()
.duration(6000)
.attrTween('d', getSmoothInterpolation );
d3.select('#lineChart > #marker')
.transition()
.duration(6000)
.attrTween("cx", function (d, i, a) { return d3.interpolate(a, 620) })
.attrTween("cy", function (d, i, a) { return d3.interpolate(a, 400) });
});
</script>
</body>
</html>
水位下降线图
正文{font:15px无衬线；}
.container{最大宽度：990px}
h2{浮点：左；宽度：100%；文本对齐：居中；字体大小：30px；颜色：#666666；边距：20px 0 30px}
.突出显示{颜色：#f26522}
#图表{宽度：90%；边距：0 10%}
.domain{fill:无；笔划：灰色；笔划宽度：1；}
单击橙色点开始：
//图表数据
变量数据数组=[
{“x”：0，“y”：100000}，
{“x”：1，“y”：90000}，
{“x”：2，“y”：83000}，
{“x”：3，“y”：73000}，
{“x”：4，“y”：79000}，
{“x”：5，“y”：72000}，
{“x”：6，“y”：75000}，
{“x”：7，“y”：88000}，
{“x”：8，“y”：63000}，
{“x”：9，“y”：71000}，
{“x”：10，“y”：69000}，
{“x”：11，“y”：63000}，
{“x”：12，“y”：67000}，
{“x”：13，“y”：63000}，
{“x”：14，“y”：59000}，
{“x”：15，“y”：46000}，
{“x”：16，“y”：40000}，
{“x”：17，“y”：32000}，
{“x”：18，“y”：29000}，
{“x”：19，“y”：20000}，
{“x”：20，“y”：18000}，
{“x”：21，“y”：17000}，
{“x”：22，“y”：9000}，
{“x”：23，“y”：0}，
{“x”：24，“y”：0}，
{“x”：25，“y”：0}，
{“x”：26，“y”：0}，
{“x”：27，“y”：0}，
{“x”：28，“y”：0}，
{“x”：29，“y”：0}，
{“x”：30，“y”：0}
];
//变数
var currentAge=65
var寿命=92
var yearsToLive=寿命-当前年龄
var years=dataArray.length
var totalDrawdown=dataArray[0]。y
var chartWidth=800
var chartHeight=400
var chartMargin=20
高度=20
var widthScale=d3.scale.linear（）
.domain（[当前年龄，当前年龄+年]）
.范围（[0，图表宽度-图表边距]）；
var axis=d3.svg.axis（）
.滴答声（5）
.尺寸（20）
.比例尺（宽度比例尺）；
//图表缩放
x_scale=d3.scale.linear（）.domain（[0，years]）.range（[0，chartWidth]）；
y_scale=d3.scale.linear（）.domain（[0，totalDrawdown]）.range（[chartHeight-chartMargin，0]）；
var lineFunction=d3.svg.line（）
.x（函数（d）{返回x_标度（d.x）}）
.y（函数（d）{返回y_标度（d.y）}）；
函数getSmoothInterpolation（）{
var interpolate=d3.scale.linear（）
.domain（[0,1]）
.range（[1，dataArray.length+1]）；
返回函数（t）{
var Floorredx=数学地板（插值（t））；
var interpolatedLine=dataArray.slice（0，floorredx）；
if（floorredx>0&&floorredx d3.select('#lineChart > #marker')
.transition()
.duration(6000)
.attrTween("cx", function (d, i, a) { return d3.interpolate(a, 620) })
.attrTween("cy", function (d, i, a) { return d3.interpolate(a, 400) });
function getSmoothInterpolation() {
var interpolate = d3.scale.linear()
.domain([0,1])
.range([1, dataArray.length + 1]);
return function(t) {
var flooredX = Math.floor(interpolate(t));
var interpolatedLine = dataArray.slice(0, flooredX);
if(flooredX > 0 && flooredX < dataArray.length) {
var weight = interpolate(t) - flooredX;
var weightedLineAverage = dataArray[flooredX].y * weight + dataArray[flooredX-1].y * (1-weight);
interpolatedLine.push({"x":interpolate(t)-1, "y":weightedLineAverage});
//get the length of the path
var len = d3.select("#journey").node().getTotalLength();
//get the svg point at that length
var pt = d3.select("#journey").node().getPointAtLength(len);
//translate the circle to that point.
d3.select('#lineChart > #marker').attr("transform", "translate(" +pt.x + "," + pt.y + ")");
}
return lineFunction(interpolatedLine);
}
}