D3：序號標尺，rangebands和紐約地鐵

我有一個可視化顯示紐約市地鐵通過的人口普查區域的中位收入水平（圖片在這裏 - https://dl.dropbox.com/u/17156665/Screen%20Shot%202013-04-08%20at%209.56.20%20PM.png）。希望清楚地顯示哪些區域在哪些區域。使用該文件獲取數據（https://docs.google.com/spreadsheet/pub?key=0ApL2ZVhpOmONdFdTUWhxV252elNORVNqT0g5Y0NzV1E&output=html）。思考最好的方法是在郡切換時畫一條垂直線，然後在底部附上自治市鎮的名稱。D3：序號標尺，rangebands和紐約地鐵

現在我已經在背景中使用if語句着色了一系列rects，但它非常笨重。玩過順序秤和範圍帶無濟於事。任何更好的解決方案非常感謝

來源

2013-04-09 larrybuch

如果你可以設置一個jsFiddle來顯示你已經完成的任務，然後詢問你想要改進的某個方面的具體問題，那將是非常棒的。 – 2013-04-09 02:39:29

感謝@ChrisJamesC的建議。所有這一切都是新的。只是把代碼放在這裏 - http://jsfiddle.net/tLH49/。在一個理想的世界中，我可以使用一個比例尺並追加「曼哈頓」一次，直到地鐵移動到布魯克林，然後繪製一條垂直線，寫上布魯克林，直到它進入皇后等等。 – larrybuch 2013-04-09 02:59:28

（這是一個非常有趣的數據並列！）

IMO順序量表太笨重了這一點，但更重要的是，會有的情況下的問題，其中一條線穿過同一行政區不止一次（如M行，起始和結束於皇后區）;因爲順序規模需要獨特的價值。

可能最好的解決方案是首先建立一個數據數組，代表每個行政區的起始位置及其跨越的停靠點數量。例如。爲中號線，就成了這個樣子：

[ 
    { 
    "county": "81", 
    "countyName": "Queens" 
    "start": 1, 
    "span": 14 
    }, 
    { 
    "county": "61", 
    "countyName": "Manhattan" 
    "start": 15, 
    "span": 10 
    }, 
    { 
    "county": "47", 
    "countyName": "Brooklyn" 
    "start": 25, 
    "span": 7 
    }, 
    { 
    "county": "81", 
    "countyName": "Queens" 
    "start": 32, 
    "span": 5 
    } 
]

一個（有點神祕，但相當簡潔）的方式來創建該數據陣列呼籲您篩選數據中reduce()方法。像這樣：

boroughs = filtered_data.reduce(
     function(memo, stop, i) { 
     var len = memo.length; 
     if(len == 0 || (memo[len - 1].county != stop.county)) { 
      memo.push({ 
      county: stop.county, 
      start: i+1, 
      span: 1 
      countyName: "foo"// This needs a dictionary mapping county code to name 
      }); 
     } 
     else { 
      memo[len - 1].span++; 
     } 
     return memo; 
     }, 
     [] 
    )

構建此數據後，您將它綁定到d3選擇併爲每個條目創建一個組。也就是說，如果一條線經過3個區，你會創建3個組。在每個組內您可以附加text作爲自治區的名稱，rect或line作爲劃定。事情是這樣的：

// note the use of your `stop_scale` for calculating positions/widths 
    d3.selectAll('g.borough').data(boroughs) 
    gCounties.enter() 
     .append('g')// Create a group 
     .attr('class', 'borough' 
     .attr('transform', function(d) {// move the group to its appropriate x position 
     return 'translate(' + stop_scale(d.start+1) + ')'; 
     }) 
     .each(function(d, i) {// inside each group: 
     // append a rect (this is just an example) 
     d3.select(this) 
      .append('rect') 
      .style('stroke', '#000') 
      .attr('x', 0) 
      .attr('width', stop_scale(d.span)) 
      .attr('height', 50);// This height should be changed to match your chart 
     // append a text 
     d3.select(this) 
      .append('text') 
      .text(d.countyName); 
     });

順便說一句，你的代碼可以使用重構。您不必在draw_first_line和update_chart函數之間重複代碼。欲瞭解更多信息，請查看關於d3 tutorials page的一般更新模式（第I部分，第II部分和第III部分）。

來源

2013-04-09 07:23:27 meetamit

非常感謝。試圖現在就實施它。 – larrybuch 2013-04-09 12:32:13

工作完美！再次感謝！ – larrybuch 2013-04-09 23:38:11

@larrybuch很高興聽到。這是一個有趣的可視化。看到工作版本會很酷（你可以在準備好的時候在這裏發佈鏈接）。 – meetamit 2013-04-10 03:16:14

D3：序號標尺，rangebands和紐約地鐵

回答

相關問題