在點擊事件時動態添加矩形

我正試圖動態添加矩形點擊事件。目標是一旦我點擊一個矩形，將添加額外的文本行。在點擊事件時動態添加矩形

我曾嘗試使用下面的腳本：

svg.append("rect") 
.attr("x", 0) 
.attr("y", 31) 
.attr("width", 250) 
.attr("height", 30) 
.attr("fill", "rgb(82,82,82)") 
.attr("stroke-width", 0) 
.on("click",function() 
{ 
     MyDataSource= dataset.filter(function(d) { 
     return d.Topic== "MyTopic"; 
        }); 
    console.log("Button clicked"); 
    var topics = svg.selectAll("g") 
    .data(MyDataSource) 
    .enter() 
    .append("g") 
    .attr("class","bar"); 

     var rects = topics.append("rect") 
    .attr("y", function(d, i) { 
     return (i+2) * 31; 
    }) 
    .attr("x", 0) 
    .attr("width", 250) 
    .attr("height",30) 
    .attr("fill", "rgb(8,81,156)") 
    .attr("stroke-width",0) 
    .append("title") 
    .text(function(d) { 
      return d.Topics; 
    }); 


     var recttext = topics.append("text") 
    .attr("y", function(d,i) { 
     return (i+2)*31+20; 
    }) 
    .attr("x", 150) 
    .text(function(d) { 
     return d.Topics; 
    }) ;     
});

一旦我對矩形點擊，控制檯將有「按鈕點擊」但什麼都不會發生在頁面上。

如果我拿掉Onclick函數中的腳本並將其添加到頁面默認代碼中，那麼當頁面首次加載時，行將被成功添加。

如何設置此代碼在點擊事件中正常工作？

在此先感謝

來源

2017-08-11 SDB17

如果你想在每一次點擊添加新的矩形，請確保您還添加新的數據MyDataSource。通過selection.data().enter().append()模式，d3將傳遞給數據的參數與選擇中存在的任何數據進行比較。爲所有新數據添加新元素。現在，每次點擊的數據都是一樣的（除了第一個），所以d3決定沒有什麼要更新。因此，topics引用了一個空選擇，並且您後續的追加調用將不會呈現任何內容。

但是，如果MyDataSource根本沒有改變，那麼您最終會得到一個包含很多數據集副本的長陣列。在這種情況下更好的選擇是使用.datum()而不是.data()，它允許您將許多元素綁定到相同的單個數據。如果該數據是一個數組，則可以遍歷它以創建新元素，並達到與.data()相同的目標，但是是更清晰的基礎數據結構。

來源

2017-08-11 20:51:55 gmferland

謝謝您的回覆gmferland。就我而言，即使在第一次單擊事件中，MyDataSource的數據也不會顯示。我已更新我的代碼以顯示如何填充MyDataSource。感謝您對.datum提供更清晰的代碼的建議，我會看看它並嘗試實現它。 – SDB17

只需複製代碼並將MyDataSource更改爲用於調試目的的簡單數組，我在第一次單擊時就會看到矩形。這讓我覺得這個問題可能與MyDataSource的填充方式有關。你的d3特定的代碼看起來很好 – gmferland

在點擊事件時動態添加矩形

回答

相關問題