1

ローソク足っぽいチャートのレンダリングである次のd3ブロックhttp://bl.ocks.org/lakenen/8529857で遊んでいます。その出力は次のようになります。 安っぽいローソク足チャート

各ブロックのデータは、1 日分の金融株数 (高値、安値、始値、終値) です。

ただし、通常、ローソク足チャートは異なります。通常、ブロックは等間隔に配置され、1 日あたり 1 つのグリッド線があり、x 軸には 1 日 1 回ラベルが付けられます。これは、Google Finance での例です。 ここに画像の説明を入力

上記の d3 チャートをレンダリングするコードは次のとおりです。

var margin = 50;           

      var chart = d3.select("#chart")
          .append("svg:svg")
          .attr("class", "chart")
          .attr("width", width)
          .attr("height", height);

      var y = d3.scale.linear()
          .domain([d3.min(data.map(function(x) {return x["Low"];})), d3.max(data.map(function(x){return x["High"];}))])
          .range([height-margin, margin]);
      var x = d3.scale.linear()
          .domain([d3.min(data.map(function(d){return d.timestamp;})), d3.max(data.map(function(d){ return d.timestamp;}))])
          .range([margin,width-margin]);

          chart.selectAll("line.x")
           .data(x.ticks(10))
           .enter().append("svg:line")
           .attr("class", "x")
           .attr("x1", x)
           .attr("x2", x)
           .attr("y1", margin)
           .attr("y2", height - margin)
           .attr("stroke", "#ccc");

          chart.selectAll("line.y")
           .data(y.ticks(10))
           .enter().append("svg:line")
           .attr("class", "y")
           .attr("x1", margin)
           .attr("x2", width - margin)
           .attr("y1", y)
           .attr("y2", y)
           .attr("stroke", "#ccc");

          chart.selectAll("text.xrule")
           .data(x.ticks(10))
           .enter().append("svg:text")
           .attr("class", "xrule")
           .attr("x", x)
           .attr("y", height - margin)
           .attr("dy", 20)
           .attr("text-anchor", "middle")
           .text(function(d){ var date = new Date(d * 1000);  return (date.getMonth() + 1)+"/"+date.getDate(); });

         chart.selectAll("text.yrule")
          .data(y.ticks(10))
          .enter().append("svg:text")
          .attr("class", "yrule")
          .attr("x", width - margin)
          .attr("y", y)
          .attr("dy", 0)
          .attr("dx", 20)        
          .attr("text-anchor", "middle")
          .text(String);

    chart.selectAll("rect")
      .data(data)
      .enter().append("svg:rect")
      .attr("x", function(d) { return x(d.timestamp); })
          .attr("y", function(d) {return y(max(d.Open, d.Close));})       
      .attr("height", function(d) { return y(min(d.Open, d.Close))-y(max(d.Open, d.Close));})
      .attr("width", function(d) { return 0.5 * (width - 2*margin)/data.length; })
          .attr("fill",function(d) { return d.Open > d.Close ? "red" : "green" ;});

        chart.selectAll("line.stem")
          .data(data)
          .enter().append("svg:line")
          .attr("class", "stem")
          .attr("x1", function(d) { return x(d.timestamp) + 0.25 * (width - 2 * margin)/ data.length;})
          .attr("x2", function(d) { return x(d.timestamp) + 0.25 * (width - 2 * margin)/ data.length;})         
          .attr("y1", function(d) { return y(d.High);})
          .attr("y2", function(d) { return y(d.Low); })
          .attr("stroke", function(d){ return d.Open > d.Close ? "red" : "green"; })

      }

ティック数を変更する値をいじってみましたが、それをデータ.data(x.ticks(10))ポイントの値と等しく設定する方法がわかりません。また、d3.scale.linear().domain(...)レンダリング前にデータがどのように正確に変更されているかもわかりません始まります。

では、ブロックごとにグリッド線とブロックごとにラベルを作成できるように、ブロックを均等に配置するにはどうすればよいでしょうか?

4

1 に答える 1

3

問題は、エミュレートしようとしているグラフに、時間に基づく線形の x 軸がないことです (日数が欠落しています)。データ ポイントの数に基づいて線形スケールを使用し、ラベル値をカスタム設定する必要があります。

このコードを実際にテストしていないため、バグがある可能性があります。しかし、これは私が問題にアプローチする方法です。

// Create a formatter that given an index, will print the day number for the
// data at that index in data
var dayFormatter = d3.time.format('%d');
var dayAxisFormatter = function(d) {
    return dayFormatter(new Date(data[d].timestamp));
}

// Create a formatter that given an index, will print the short month name
// along with the day number for the data at that index in data
var dayWithMonthFormatter = d3.time.format('%b %d');
var dayWithMonthAxisFormatter = function(d) {
   return dayWithMonthFormatter(new Date(data[d].timestamp));
}

// Custom formatter to handle printing just the day number except for the first
// instance of the month, there we will print the short month and the day

// helper to create the formatter function that d3 accepts
function timeFormat(formats) {
  return function(date) {
    var i = formats.length - 1, f = formats[i];
    while (!f[1](date)) f = formats[--i];
    return f[0](date);
  };
}
var firstDone = {}; // track the months so first instance gets month label
var tickFormatter = timeFormat([
    [dayAxisFormatter, function(d) { return true; }],
    [dayWithMonthFormatter, function(d) {
        var month = (new Date(data[d].timestamp)).getMonth();
        var result = !firstDone['m' + month];
        firstDone['m' + month] = true;
        return result;
     }],
]);

// Set up a regular linear scale. This would normally just count up from
// 0 to d.length, but we'll use a custom formatter to print out our day
// numbers instead.
var x = d3.scale.linear()
    .domain([0, d.length]) // set the domain to be from 0 to # of points
    .range([margin,width-margin]);

// Set up the axis to use our customer formatter
var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(height)
    .tickFormat(tickFormatter);

// Now when you go to draw your data, you need to remember that the
// underlying scale is based on the data index, not the data timestamp.
chart.selectAll("rect")
    .data(data)
    .enter().append("svg:rect")
    .attr("x", function(d, i) { return x(i); })
    ...
于 2015-01-24T18:12:48.183 に答える