在点击事件时动态添加矩形

我正试图动态添加矩形点击事件。目标是一旦我点击一个矩形，将添加额外的文本行。在点击事件时动态添加矩形

我曾尝试使用下面的脚本：

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

在点击事件时动态添加矩形

回答

相关问题