協調視圖/調度事件

我試圖使用d3.dispatch和Dispatching Events塊來指導我調整幾個視圖/控件。但是，我遇到了一個概念性障礙。請看下面的意見/控制：協調視圖/調度事件

國家
每天的事件數的直方圖的下拉

我想要滴事件列表向下過濾直方圖和列表。然後，我想刷直方圖以再次篩選列表。換句話說，應該可以回答一個問題，如「向我展示這些國家這些日子的事件」。

問題是，當我使用d3.dispatch註冊過濾器事件時，直方圖會自行過濾。我知道爲什麼會這樣;直方圖是用過濾器事件註冊的，但不知道它是否自己觸發了這個事件。我無法弄清楚的是將下拉菜單與直方圖和列表以及直方圖鏈接到列表的合理模式。每個視圖是否應該有過濾器事件？我是否應該根據需要將每個視圖註冊到其他視圖？

以下代碼片段可能有助於澄清問題。爲簡單起見，我已經取代了直方圖按鈕：

var dispatch = d3.dispatch('load', 'filter'); 
 

 
dispatch.on('filter.histogram', function() { 
 

 
    console.log('filter.histogram'); 
 

 
}); 
 

 
dispatch.on('filter.list', function() { 
 

 
    console.log('filter.list'); 
 

 
}); 
 

 
dispatch.on('load', function() { 
 

 
    console.log('load'); 
 

 
    d3.select('select').on('change', function() { 
 
    dispatch.filter(); 
 
    }); 
 

 
    d3.select('button').on('click', function() { 
 
    dispatch.filter(); 
 
    }); 
 

 
}); 
 

 
dispatch.load();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<html> 
 

 
<body> 
 

 
    <select> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    </select> 
 

 
    <button>Histogram</button> 
 

 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 

 
</body>

來源

2014-10-30 Iain Dillingham

的一般方法這種同步的是，意見（historgram和下拉式）一無所知如何篩選數據，也不關於彼此。他們派發由創建它們的代碼的一部分處理的事件（傳統上是一個控制器，但不一定非常正式）。然後，該控制器會根據過濾標準過濾數據來對事件作出反應 - 它自己維護的標準或它可以請求視圖的標準 - 然後將過濾的數據返回給兩個視圖-render。如果不知道如何執行過濾和刷新兩個視圖，很難更具體地回答。

此外，通常d3.dispatch一起使用的那種結構described here的，在這種情況下每個視圖將實例化其自身的調度和使用d3.rebind(myView, dispatcher, 'on')使on()方法可用於控制器訂閱。例如，您可以看到它正在force layout's source code的第305行完成。

來源

2014-10-30 20:12:00 meetamit

每個視圖都可以訪問原始事件數組，每個事件數組然後都會過濾並作爲參數傳遞給dispatch.filter（）。我沒有將這種行爲包含在我的代碼片段中，因爲我對那些不緊密結合視圖的方法感興趣。從你的回答看來，我應該調查一個類似MVC的體系結構：d3.dispatch似乎更適合定製事件，正如你所討論的那樣。 – 2014-10-30 21:20:36

協調視圖/調度事件

回答

相關問題