Question

我已经按照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")]; 
      }
    });
});

Answer 1

我在我的safari 6.0.5中检查了它，没关系。 svg有很多漏洞。如果您找到一个，则可以将完整描述发布给浏览器开发人员，例如here。

d3.js折线图在Safari中无法正确显示

1 个答案: