Question

我正在制定股票价格，间隔为10分钟，长度为10天。当然股票市场只在9:30到4之间开放。我如何仅显示上午9:30到4点之间的图表部分？例如，Google财经图表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);

Answer 1

我猜你不想在9:30到4:00之间显示图表的一部分，而是在每天的范围内显示。

您可以通过将剩余的小时数压缩到范围的相同部分来实现这一点，这可以通过利用d3 scale可以获取一系列值的事实来实现。例如，假设我有以下数据：

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] - ＆gt; [10,250]，[2,10] - ＆gt; [250,250]，[10,12] - ＆gt; [250490]。我已经有效地切断了我的域名。

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

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

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

为了使这个好，可读和可扩展到多天，你只需要编写函数来生成你的域，范围和滴答值数组，虽然在不同的时间段添加一些线性分频器会使事情变得多更容易。

仅显示d3.js的特定时间

1 个答案: