1

我已经按照关于如何制作折线图的 d3.js 教程进行了操作，它在 Chrome (v24.0.1312.56) 中成功运行/正常显示，但在 Safari (v6.0.2 (7536.26.17)) 中却没有。在 Safari 中，轴显示正确，但线本身的端点绘制在 svg 之外，并且在整个画布上拉伸。在这里你可以看到它：

http://www.npcompleteheart.com/post/time-series-plotting-d3js/

我还将代码放在 jsfiddle 中，但我不确定现在如何使它工作（第一次使用它）：http: //jsfiddle.net/hFRZx/15/

jsfiddle 中唯一的变化是有一个数据变量而不是实际的 json 文件位置。

我努力了：

  • 不在线条上绘制圆圈并消除醉意
  • SVG 最初是附加到一个 div 的，我切换到在 HTML 中设置一个高度和宽度的 svg。然后将图形创建时的高度和宽度设置为“100%”。

我所知道的是，Chrome 中的路径值与 Safari 中的不同。不幸的是，我不知道为什么，因为只有这一行在代码中绘制了路径（对它来说并不多）：

 graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");

图表创建的相关代码是：

var dates = [];
var data = [];
var pointRadius = 1.75;

$.getJSON("/json/file/location.json", function(json) {
  $.each(json, function(key,value) {
    data.push(value)
    var eptime = new Date(parseFloat(key) * 1000)
    dates.push(eptime)
   });

  var margin = 110
  var m = [margin/3.5, margin, margin/3.5, margin]; // margins
  var w = 800 - m[1] - m[3];     // width
  var h = 500 - m[0] - m[2]; // height

  var x = d3.time.scale().domain([dates[0], dates[dates.length -1]]).range([0, w]);
  x.tickFormat(d3.time.format("%Y-%m-%d-%H-%M"));
  var digitLength = 100000
  var y = d3.scale.linear()
    .domain([Math.floor(d3.min(data, function(d) { return d; })/digitLength)*digitLength, 
                        d3.max(data, function(d) { return d; })])
    .range([h,0]);

  var line1 = d3.svg.line()
    .x(function(d,i) { 
            return x(dates[i]);
    })
    .y(function(d) { 
            return y(d);
    })
  var graph = d3.select("#timeseries_main")
                            .attr("width", w + m[1] + m[3])
                            .attr("height", h + m[0] + m[2])
                          .append("svg:g")
                            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  var xAxis = d3.svg.axis().scale(x).ticks(9).tickSize(-h).tickSubdivide(1);

  graph.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);


  var yAxisLeft = d3.svg.axis().scale(y).ticks(7).orient("left");
  graph.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(-10,0)")
      .call(yAxisLeft);

  graph.append("text")
      .attr("class", "y label")
      .attr("text-anchor", "end")
      .attr("y", -110)
      .attr("x", -140)
      .attr("dy", ".75em")
      .attr("transform", "rotate(-90)")
      .text("Quantity X"); 
  graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");

  dataCirclesGroup = graph.append('svg:g');
  var circles = dataCirclesGroup.selectAll('.data-point')
    .data(data);

  circles
    .enter()
      .append('svg:circle')
        .attr('class', 'data-point')
        .style('opacity', 1e-6)
        .attr('cx', function(d,i) { return x(dates[i]) })
        .attr('cy', function() { return y(0) })
        .attr('r', function() { return (data.length) ? pointRadius : 0 })
      .transition()
        .style('opacity', 1)
        .attr('cx', function(d,i) { return x(dates[i]) })
        .attr('cy', function(d) { return y(d) });

  circles
    .transition()
      .attr('cx', function(d,i) { return x(dates[i]) })
      .attr('cy', function(d) { return y(d) })
      .attr('r', function() { return (data.length) ? pointRadius : 0 })
      .attr('index', function(d,i) { return i; })
      .style('opacity', 1);

  circles
    .exit()
      .transition()
        .attr('cy', function() { return y(0) })
        .style("opacity", 1e-6)
        .remove();


    $('svg circle').tipsy({ 
      gravity: 'w', 
      html: true, 
      title: function() {
        var d = this.__data__;
        return numberWithCommas(d) + 
               '<br/> on ' + dates[$(this).attr("index")]; 
      }
    });
});
4

1 回答 1

0

我已经在我的 safari 6.0.5 中检查过了，没关系。svg 有很多错误。如果你找到了，你可以将完整的描述发布给浏览器开发者，就像这里一样。

于 2013-06-27T02:54:41.973 回答