使用NVD3.js構建焦點折線圖。爲什麼我的重點斷條

我一直奉行的NVD3例子頁面line chart with focus example但對焦欄不工作，我不能看到什麼我已經錯過了......使用NVD3.js構建焦點折線圖。爲什麼我的重點斷條

Here's a fiddle用來演示問題。你可以看到，在對焦欄拖不注重圖表

這是我的HTML（我有一些靜態的測試數據，並在底部從NVD3示例頁面的測試數據生成器）

<!DOCTYPE html> 
<html> 
<head> 
<title>$title</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js" charset="utf-8"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css"/> 

</head> 
<body> 
    <h1>$title</h1> 
    <div id="chart"> 
    <svg style="height:500px"></svg> 
    </div> 

    <script> 
    //my fake data 
    var testData = [ 
     { 
     key: 'expected', 
     //values: $expectedData 
     values: [ 
      {x: 0, y: 1}, 
      {x: 1, y: 2}, 
      {x: 2, y: 3}, 
      {x: 3, y: 4}, 
      {x: 4, y: 5}, 
     ] 
     }, 
     { 
     key: 'actual', 
     //values: $actualData 
     values: [ 
      {x: 0, y: 3}, 
      {x: 1, y: 4}, 
      {x: 2, y: 5}, 
      {x: 3, y: 4}, 
      {x: 4, y: 6}, 
     ] 
     } 
    ] 
    console.log(genTestData()); 
    console.log(testData); 

    nv.addGraph(function() { 
     var chart = nv.models.lineWithFocusChart(); 

     chart.xAxis 
      .tickFormat(d3.format(',f')); 

     chart.yAxis 
      .tickFormat(d3.format(',.2f')); 

     chart.y2Axis 
      .tickFormat(d3.format(',.2f')); 

     d3.select('#chart svg') 
      .datum(testData) 
      .transition().duration(500) 
      .call(chart); 

     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 
    /************************************** 
    * The data generator for the working test example 
    */ 

    function genTestData() { 
     return stream_layers(3,128,.1).map(function(data, i) { 
     return { 
      key: 'Stream' + i, 
      values: data 
     }; 
     }); 
    } 

    /* Inspired by Lee Byron's test data generator. */ 
    function stream_layers(n, m, o) { 
     if (arguments.length < 3) o = 0; 
     function bump(a) { 
     var x = 1/(.1 + Math.random()), 
      y = 2 * Math.random() - .5, 
      z = 10/(.1 + Math.random()); 
     for (var i = 0; i < m; i++) { 
      var w = (i/m - y) * z; 
      a[i] += x * Math.exp(-w * w); 
     } 
     } 
     return d3.range(n).map(function() { 
      var a = [], i; 
      for (i = 0; i < m; i++) a[i] = o + o * Math.random(); 
      for (i = 0; i < 5; i++) bump(a); 
      return a.map(stream_index); 
     }); 
    } 
    function stream_index(d, i) { 
     return {x: i, y: Math.max(0, d)}; 
    } 
    </script> 
</body> 
</html>

來源

2014-07-03 Paul D' Ambra

小提琴的大部分作品。顯然有一個問題，如果你的焦點不足2點，主圖表就是空白。您會注意到nvd3的示例頁面存在問題，但是有足夠的數據可以有意放大到極致。（不像你的小提琴那裏只有5個數據點）

只需確保焦點上的最小選擇尺寸足夠大，以至少跨越2點應該解決您的問題。

來源

2014-09-09 08:26:01 Lorenz03Tx

使用NVD3.js構建焦點折線圖。爲什麼我的重點斷條

回答

相關問題