d3js折线图-如何将最后一步扩展到范围的末端? [英] d3js line chart -- how to extend last step to end of range?
问题描述
这很简单，但我无法摆脱这个问题.
一条线是两个点(值)之间的链接，是从值A到值B绘制的.因此，假设A的值为10，B的值为20而C缺失.线现在从0绘制到10到20并完成.我想画一条从0到10到20到25的线.值是ment作为x轴的比例(0、10、20、30、40).是否可以在不更改我的线起点的情况下开始，所以它仍然从x轴的零点开始?
当然不用画20到25条额外的线了:)
我行的代码:
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue);
})
.y(function (d) {
return y(d.value);
}).interpolate("step-after");
提前谢谢
这里有两张图片.第一个是现在的样子，第二个是现在的样子.
(来源: www.axi.at )
(来源: www.axi.at )
©a-x-i(d3js令我发疯，但这很酷....)
d3永远不会将行延伸到最终数据点之外.但是，线的外观以及数据点的连接方式取决于)插值器会在它们之间绘制一条直线.
后继" 插值器从第一个点(10,20)开始，并画出一条水平线到第二点的x值(即到(15 ，20))，然后绘制一条垂直线，直到(15,30).结果:第一个值显示为一条水平线，一直保持不变，直到应用第二个值为止.
相反，先行一步" 插值器从第一个点(10,20)开始，并绘制一条 vertical 线直到y的y值.第二点(即到(10,30))，然后将水平线绘制到(15,30).结果:第一个值仅显示为垂直台阶的起点，而第二个值在两者之间的时间中显示为恒定.
最后，步骤" 插值器在两个x值之间更改y值 half-way .结果是，开始值和结束值都显示为水平线，持续了它们之间距离的一半.
以下是不同的行插值器选项的比较:
http://fiddle.jshell.net/c2mru/1/
我认为，最适合您的是您:
- 使用步进"插值器功能
- 将线条的x值设置为横条的中间.
您可以通过更改来实现
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue);
})
.y(function (d) {
return y(d.value);
}).interpolate("step-after");
到
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue) + x.rangeBand()/2;
})
.y(function (d) {
return y(d.value);
}).interpolate("step");
这将导致一条线从第一个条的中点开始，到最后一个条的中点结束，但用水平线清楚地显示每个条的值.
如果您真正必须在行的最末端有行开始和结束，那么您有两个选择:
- 创建自定义插值函数；或者，
- 在将数据数组传递到
d3.svg.line时添加一个最终值"数据点.
It's simple, but I can't get rid of the problem.
A line is a link between two points (values) and is drawn from value A to value B. So let's say A has value 10, B has value 20 and C is missing. The line is now drawn from 0 to 10 to 20 and finished. I want to draw the line from 0 to 10 to 20 to 25. Value is ment as the scale of the x-axis (0, 10, 20, 30, 40). Is this possible without changing the beginning of my line, so it still starts at the zero-point of the x-axis?
Without drawing a additional line from 20 to 25 of course :)
The code of my line:
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue);
})
.y(function (d) {
return y(d.value);
}).interpolate("step-after");
thx in advance
Here two pictures. The first one, how it looks like now, and the second one, how it should look like.
(source: www.axi.at)
(source: www.axi.at)
©a-x-i (d3js is driving my crazy, but it's cool....)
d3 will never extend a line beyond the final data point. However, the appearance of the line, and how the data points are connected, depends on the interpolator setting for d3.svg.line.
For a simple example, imagine you only had two points (10,20) and (15,30).
The normal ("linear") interpolator would draw a straight line between them.
The "step-after" interpolator starts at the first point (10,20), and draws a horizontal line out to the x-value of the second-point (i.e., to (15,20) ), then draws a vertical line up to (15,30). The result: the first value is shown as a horizontal line that is held constant until the second value applies.
In contrast, the "step-before" interpolator starts at the first point (10,20), and draws a vertical line up to the y-value of the second-point (i.e., to (10,30) ), then draws the horizontal line to (15,30). The result: the first value is shown only as the starting point of the vertical step, with the second value being shown as held constant during the time in between.
Finally, the "step" interpolator changes y-values half-way between the two x-values. The result is that both start values and end values are shown as horizontal line lasting for half the distance between them.
Here's a comparison of the different line interpolator options:
http://fiddle.jshell.net/c2mru/1/
I think what would look best for you is if you:
- use the "step" interpolator function
- set the x-values for the line to be the middle of your horizontal bars.
You do this by changing
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue);
})
.y(function (d) {
return y(d.value);
}).interpolate("step-after");
to
var line = d3.svg.line()
.defined(function (d) { return d.value != null; })
.x(function (d, i) {
return x(d.xValue) + x.rangeBand()/2;
})
.y(function (d) {
return y(d.value);
}).interpolate("step");
This will result in a line that starts at the mid-point of your first bar and ends at the mid-point of your last bar, but clearly shows the value at each bar with a horizontal line.
If your really must have the line start and end at the very end of your range, then you have two options:
- Create a custom interpolation function; or,
- Add an "end-value" data point when you pass your data array to
d3.svg.line.
这篇关于d3js折线图-如何将最后一步扩展到范围的末端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
