Question

我正在尝试使用缩放功能实现烛台图。查看其他示例并阅读d3 wiki我能够绘制图形，但我在缩放功能方面遇到了一些困难。

当我放大图形时，一些组件在边缘区域中偏离轴。我是否需要在缩放处理函数（缩放）中过滤这些数据点，或者这是我在这里缺少的基本内容。对此有任何帮助会有帮助吗？

的链接

谢谢！

var margin = 30;
var width = 500;
var height = 200;
var data = 
[{"time":1365532200000,"close":5.65,"high":5.95,"low":5.3,"open":5.3,"stock_id":2},{"time":1365618600000,"close":5.6,"high":5.8,"low":5.55,"open":5.6,"stock_id":2},{"time":1365705000000,"close":5.55,"high":5.65,"low":5.45,"open":5.6,"stock_id":2},{"time":1365964200000,"close":5.75,"high":5.85,"low":5.4,"open":5.4,"stock_id":2},{"time":1366050600000,"close":5.65,"high":5.8,"low":5.6,"open":5.75,"stock_id":2},{"time":1366137000000,"close":5.7,"high":5.9,"low":5.6,"open":5.9,"stock_id":2},{"time":1366223400000,"close":5.65,"high":5.75,"low":5.6,"open":5.6,"stock_id":2},{"time":1366569000000,"close":5.9,"high":5.95,"low":5.7,"open":5.75,"stock_id":2},{"time":1366655400000,"close":5.75,"high":6,"low":5.7,"open":5.9,"stock_id":2},{"time":1366828200000,"close":5.8,"high":6.05,"low":5.75,"open":5.95,"stock_id":2},{"time":1366914600000,"close":5.6,"high":5.95,"low":5.55,"open":5.95,"stock_id":2},{"time":1367173800000,"close":5.65,"high":5.7,"low":5.55,"open":5.55,"stock_id":2},{"time":1367260200000,"close":5.6,"high":5.8,"low":5.55,"open":5.65,"stock_id":2},{"time":1367433000000,"close":5.6,"high":5.7,"low":5.5,"open":5.5,"stock_id":2},{"time":1367519400000,"close":5.75,"high":5.9,"low":5.5,"open":5.5,"stock_id":2},{"time":1367778600000,"close":5.7,"high":6,"low":5.7,"open":6,"stock_id":2},{"time":1367865000000,"close":5.7,"high":5.8,"low":5.6,"open":5.8,"stock_id":2},{"time":1367951400000,"close":6,"high":6.25,"low":5.65,"open":5.9,"stock_id":2},{"time":1368037800000,"close":6.15,"high":6.6,"low":6.1,"open":6.2,"stock_id":2},{"time":1368124200000,"close":5.95,"high":6.3,"low":5.9,"open":6.1,"stock_id":2},{"time":1368210600000,"close":6.2,"high":6.3,"low":5.9,"open":5.9,"stock_id":2}]

var dateFormat = d3.time.format("%d%b");

function build_charts(data) {        
  var candleWidth = width / (data.length + 2);
  var chart = d3.select("#chart")
          .append("svg:svg")
          .attr("class", "chart")
          .attr("width", width + 2*margin)
          .attr("height", height + 2*margin)
          .append("g")
          .attr("transform", "translate(" + margin + "," + margin + ")");

  var y = d3.scale.linear()
          .domain([d3.min(data.map(function(x){return d3.min([x.low, x.high, x.close, x.open]); } )),
                   d3.max(data.map(function(x){return d3.max([x.low, x.high, x.close, x.open]); } ))])
          .range([height, 0]);

  var x = d3.scale.linear()
          .domain([d3.min(data.map(function(d){return d.time;})),
             d3.max(data.map(function(d){return d.time;}))])
          .range([0, width]);

  var zoom = d3.behavior.zoom()
     .scaleExtent([1, 5])
     .x(x)
     .y(y)
     .on("zoom", zoomed);

  var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(10)
                .tickFormat(function(d) { return dateFormat(new Date(d)); });

  var yAxis = d3.svg.axis()
                .scale(y)
                .orient("right")
                .ticks(10);

  chart.append('g')
       .attr("class", "x axis")
       .attr("transform", "translate(0, " + height + ")")
       .call(xAxis);

  chart.append('g')
       .attr("class", "y axis")
       .attr("transform", "translate(" + width + ", 0)")
       .call(yAxis);

  chart.append('g')
    .attr("class", "cs_rect_container")
    .selectAll("rect")
    .data(data)
    .enter().append("svg:rect")
    .attr("class", "cs_rect")
    .attr("x", function(d) { return x(d.time); })
    .attr("y", function(d) { return y(d3.max([d.open, d.close]));})       
    .attr("height", function(d) { return y(d3.min([d.open, d.close])) - y(d3.max([d.open, d.close]));})
    .attr("width", function(d) { return 0.5 * candleWidth; })
    .attr("fill", function(d) { return d.open > d.close ? "black" : "red" ;});

  chart.append('g')
    .attr("class", "cs_stem_container")
    .selectAll("line.cs_stem")
    .data(data)
    .enter().append("svg:line")
    .attr("class", "cs_stem")
    .attr("x1", function(d) { return x(d.time) + 0.25 * candleWidth;})
    .attr("x2", function(d) { return x(d.time) + 0.25 * candleWidth;})
    .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 ? "black" : "red"; });

  chart.append("rect")
    .attr("class", "boundary")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

  function zoomed() {
    d3.select('.x.axis').call(xAxis);
    d3.select('.y.axis').call(yAxis);
    d3.select('.cs_stem_container').attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
    d3.select('.cs_rect_container').attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
  }
}

build_charts(data);

CandleStick图表放大d3

0 个答案: