我用d3js做了一个折线图。下面给出了实现。 但是，图表突然出现在屏幕上(没有过渡)。 我怎样才能使图表出现在屏幕上并带有过渡，从而使图表产生“展开效果”，即就像用户在“t”秒内观看时正在绘制线条一样。
var lineData = [
[new Date('Mon Aug 17 2015 00:00:00 GMT+0530 (India Standard Time)'), 100],
[new Date('Tue Aug 18 2015 00:00:00 GMT+0530 (India Standard Time)'), 100],
[new Date('Thu Aug 20 2015 00:00:00 GMT+0530 (India Standard Time)'), 66.66666666666667],
[new Date('Fri Aug 21 2015 00:00:00 GMT+0530 (India Standard Time)'), 50],
[new Date('Sat Aug 22 2015 00:00:00 GMT+0530 (India Standard Time)'), 40]
];
var margin = {
top: 30,
right: 30,
bottom: 30,
left: 30
};
var height = 200 - margin.top - margin.bottom,
width = 300 - margin.left - margin.right;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var xScale = d3.time.scale().domain([lineData[0][0], lineData[lineData.length - 1][0]]).range([0, width]);
var yScale = d3.scale.linear().domain([0, 100]).range([0, height]);
var svgContainer = d3.select("#lc-visual").select("svg").attr("width", margin.right + width + margin.left).attr("height", margin.bottom + height + margin.top);
var lineFunction = d3.svg.line().x(function(d, i) {
return xScale(d[0]);
})
.y(function(d, i) {
return height - yScale(d[1]);
})
.interpolate("linear");
var svgGroup = svgContainer.append('g');
var lineGraph = svgGroup.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", '#000')
.attr("stroke-width", 2)
.attr("fill", "none");<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<div class="group">
<!-- </form> -->
<div id="lc-visual">
<svg id="#line-svg">
</svg>
</div>
</div>
</body>最佳答案
至少有两种方法可以做到这一点。
在点之间插入
d属性。这使您可以更好地控制每个线段。插入
stroke-dashoffset以获得外观 画线。这提供了更好、更流畅的视觉体验
This codepen演示了这两种方法之间的区别。
方法一:使用d属性
第一种方法将按顺序添加每条线和每个点，为您提供了提供涉及点本身的过渡的选项。
您想首先将数据的第一个点传递给 d 属性，如下所示:selection.attr('d', lineData[0])。然后调用转换并使用 attrTween 传入 lineData并声明一个补间函数:selection.attrTween('d', tween)。
您的代码如下所示:
var lineGraph = svgGroup.append("path")
.transition()
.duration(2000) // must pass in duration for tween function
.attrTween('d', tween) // call tween function with attrTween
function tween() {
var interpolate = d3.scale.quantile()
.domain([0,1]) // where 0 is start of tween and 1 is end of tween
.range(d3.range(1, lineData.length + 1)); // return current point and all previous points in data
return function(t) {
// render the line in sequence from beginning
return lineFunction(lineData.slice(0, interpolate(t)));
};
}
如您所见，这将在每个 点转换渲染，但不会模拟线条的绘制。
方法 2:使用 stroke-dasharray 和 stroke-dashoffset 属性
如果您不熟悉这些属性，您可能想了解 stroke-dasharray 和 stroke-dashoffset 如何对路径进行操作。这里有个好CSS Tricks article关于它们的工作方式，这里是 codepen我创建的演示了这些属性如何工作(将所有值设置为最大值，然后慢慢减小 stroke-dashoffset)。
这个方法的要点是我们想像这样设置你的初始值:
selection
.attr('stroke-dasharray', lineLength + ' ' + lineLength)
.attr('stroke-dashoffset', lineLength);
您希望补间结尾的路径选择属性如下所示:
selection
.attr('stroke-dashoffset', 0);
您正在将 stroke-dashoffset 从路径长度转换为 0。在您的情况下，您将如何完成此操作。
您的代码如下所示:
// render path so it's possible to check its length
lineGraph
.attr('d', lineFunction(lineData));
// get total length of path
var lineLength = lineGraph.node().getTotalLength();
lineGraph
.transition()
.duration(2000)
.attr('stroke-dasharray', lineLength + ' ' + lineLength)
// here we transition the stroke-dashoffset to simulate 'drawing' the line
.attrTween('stroke-dashoffset', tween);
function tween() {
// get values between lineLength and 0
var interpolate = d3.interpolate(lineLength, 0);
return function(t) {
return interpolate(t);
};
}
我创建了一个 working codepen使用您的示例演示这两种方法。我注释掉了第二个示例，以更好地展示第一个示例的程序优势和使用第二个示例的视觉优势。
关于javascript - 在 d3js Linechart 中展开线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32789314/