创建一个按钮来隐藏/显示d3.js中的文本和文本

Question

我想使用d3.js从框中的数据创建一个简单列表，并具有一个按钮来隐藏和显示该框及其内容。我做到了，但是我遇到了2个不同的错误：

1）列表从项目2开始（！）第一个在哪里？

2）如果单击按钮以隐藏框，则内容仍然可见！只有盒子消失了。

您能帮我修复它吗？

jsFiddle：here

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  
  
  mounted : function() {
  
  		this.start();
  
  },
  
  
  methods: {
  
  	start : function(){
    
    var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 ,
    height = 500 ;
    var active = true;
    
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height );
    
    var box = svg.append("rect")
            .attr("x", 20)
                    .attr("y", 20 )
                    .attr("rx", 20)
                    .attr("ry", 20)
                    .attr("id", "list")
                    .attr("height",400)
                    .attr("width", 500)
                    .style("stroke", "#112233")
                    .style("fill", "#DDD")
                    .style("stroke-width", 1);
                    
       var items = svg .selectAll("rect")
       								.append("g")
                      .attr("id", "texts")
       								.data(this.todos)
                      .enter()
                      			.append("text")
                            .style("fill", "#f00")
                      			.attr("x",  50)
                      			.attr("y", function (d, i) {
                       					 return 80+(i) * 20;
                    				})
                            .text(function (d, i) {
                        				return (1 + i) + ") " + d.text;
                    				});
       svg.append("circle")
  									.attr("cx", 20+500-10)
                    .attr("cy", 20+10)
                    .attr("r", 20)
                     .attr("id", "closer")
                    .style("stroke", "#fdf8fe")
                    .style("fill", "red")
                    .style("stroke-width", 1)
                    .on("click", function (d, a, i) {
                    		
												active   = (active) ? false : true,
		  									newOpacity = active ? 1 : 0;
                        console.log(newOpacity)
                      		 d3.select("#list").style("opacity", newOpacity);
                      		 d3.select("#texts").style("opacity", newOpacity);
                    
                    });
                    
    
    },
  
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>


<div id="boxList"></div>

</div>

Answer 1

1. 对于第一个设置为“文本”，而不是“矩形”

   var项目= svg .selectAll（“ text”）//不正确

2. 在单击事件时使用圆圈下方的线

   i [0] .parentNode.innerHTML =“”