2

我以 10 分钟的间隔和 10 天的长度绘制股票价格图表。当然股市只在 9:30 到 4 点之间开市。如何只显示图表中上午 9:30 到 4 点之间的部分？例如谷歌金融图表https://www.google.com/finance?q=AAPL

var margin = {top: 10, right: 10, bottom: 10, left: 10};
var width = $('#'+stock.symbol+'_graph').width() - margin.left - margin.right;
var height = 100 - margin.top - margin.bottom;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");

var line = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.price); })
    .y0(height);

var svg = d3.select('#'+stock.symbol+'_graph').append('svg')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain(d3.extent(stockHistory, function(d) { return d.date; }));
y.domain(d3.extent(stockHistory, function(d) { return d.price; }));

svg.append("path")
    .datum(stockHistory)
    .attr("class", "line")
    .attr("d", line);
4

1 回答 1

5

我猜你不仅想显示 9:30 到 4:00 之间的图表部分，还想显示每天的那个范围。

您可以通过将其余时间压缩到范围的同一部分来做到这一点，这可以通过利用 d3 比例可以采用一系列值的事实来实现。例如，假设我有以下数据：

var data = [
    {x:0, y:2},{x:0.5, y:2.2},{x:1.3,y:5},{x:2.0,y:3},
    {x:10,y:2},{x:10.7,y:4.6},{x:11.3,y:0},{x:12,y:2}
    ];

我的数据只有 [0,2] 和 [10,12] 范围内的值，所以我只想显示这些值。

我首先设置 x 值的比例，如下所示：

var xscale = d3.scale.linear()

现在我需要设置域。

    .domain([0,2,10,12])

这有效地将我的域分为三个部分：[0,2]、[2,10] 和 [10,12]。如果我同样给出一个包含四个值的数组的范围，我可以创建一个分段线性刻度。假设我正在绘制一个 500x500 的 SVG。我想将域的每个有趣部分映射到我的 svg 的一半，边缘有一点填充，并将整个无聊的中间部分映射到单个值. 为此，我提供以下范围：

    .range([10,250,250,490])

现在，我的分段线性标度上有以下三个映射：[0,2] -> [10,250]、[2,10] -> [250,250] 和 [10,12] -> [250,490]。我已经有效地切出了我的域的中间部分。

我还需要修复刻度值，因为如果我用 x 轴绘制它，d3 将不够聪明，不会尝试为我折叠成单个像素的域部分绘制任何值。我可以通过明确声明我的刻度值来做到这一点：

var xAxis = d3.svg.axis()
    .scale(xscale)
    .orient('bottom')
    .tickValues([0,1,2,11,12])

我在这里创建了这个简单示例的小提琴。可以将相同的方法应用于路径而不是圆圈，以获得示例中显示的效果。

为了使其美观、易读且可扩展到多天，您只需要编写函数来生成域、范围和刻度值数组，尽管添加一些线性分隔符来分隔时间段会使事情变得更容易。

于 2013-07-10T19:02:40.910 回答