如何使用D3獲取時間軸到物體上？

我對d3非常陌生，並試圖通過構建可視化來學習。如何使用D3獲取時間軸到物體上？

我現在的目標是根據一些時間數據製作一個圓圈和顏色圓圈。我製作了這個圈子，並且想爲它添加一個時間表。我在svg元素上使用d3.arc（）創建了這個圓。我也創建了一個時間尺度（見下文）。我的問題是，我怎樣才能把這個時間尺度「附加」到圈子裏？我希望能夠說，在xyz時間點，我的數據保存了這個值，所以現在根據色階爲這個圓圈着色。

或者......我是否在談論這個錯誤？

var time = d3.scale.ordinal() 
      .domain(d3.extent(data, function(d) { 
       return d.date; 
      }))

來源

2014-02-27 user2631296

如果你想使用時間尺度。你需要使用'd3.time.scale（）'。更多信息[** here **]（https://github.com/mbostock/d3/wiki/Time-Scales）。如果你仍然需要幫助。請提供完整代碼的小提琴。 –

我不清楚你想要做什麼。就像[這個問題]（http://stackoverflow.com/questions/20826989/d3-scatterplot-using-time-scale-on-x-axis-not-working-in-firefox）？ –

我認爲你可能需要使用量化的尺度而不是序數。 https://github.com/mbostock/d3/wiki/Ordinal-Scales說 -

序尺度有一個獨立域名，比如一組名稱或類別

，並在你的代碼，您使用的日期屬性，只給出了「範圍」你的2個值 - 數據中最早和最近的日期。那是一個離散域，但是非常有限，並且不會很好地表示你的數據。規模將只輸出最多2個值。

var now = Date.now(); 
var then = now - 1000; 

var colors = d3.scale.ordinal() 
    .domain([then, now]) 
    .range(['#ff0000','#0000ff']); 

colors(then);  // red 
colors(now);  // blue 
colors(now - 500); // red... expecting violet

將'序號'更改爲'線性'，並保持原樣。

var now = Date.now(); 
var then = now - 1000; 

var colors = d3.scale.linear() 
    .domain([then, now]) 
    .range(['#ff0000','#0000ff']); 

colors(then);  // red 
colors(now);  // blue 
colors(now - 500); // violet

棘手的部分（至少對我）中的溶液記住d3.scale.linear的輸出（）（上面的「顏色」變量）是一個函數。它可以像任何其他功能一樣被調用。

var fakeData = d3.range(then, now, 10); 

var svg = d3.select('body') 
    .append('svg') 
    .attr({ height: 500, width: 500 }); 

var circle = svg.append('circle') 
    .attr({ r: 100, cx: 250, cy: 250 }); 

function changeTime(time){ 
    circle.attr('fill', colors(time)); 
}

來源

2014-02-27 11:27:07 Julian

如何使用D3獲取時間軸到物體上？

回答

相關問題