Design a button in d3.js that toggles the visibility of a rectangle and text

Question

Design a button in d3.js that toggles the visibility of a rectangle and text

Looking to use d3.js to create a simple list from data in a box, complete with a button to toggle the visibility of the box and its content. Ran into two errors during implementation:

1) The list is starting at item 2 for some reason - where's the first one?

2) Clicking the button to hide the box doesn't hide the content, just the box itself.

Any suggestions on how to fix this?

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>

javascript d3.js

Answer 1

Answer №1

Here is where the issues stem from:

   var items = svg.selectAll("rect")
        .append("g")
        .attr("id", "texts")
        .data(this.todos)
        .enter()
        .append("text")

The problem arises because a rectangle is already appended, so when we select that rectangle and append a g to it with an id of texts, this results in invalid SVG code. To resolve this and achieve our goal of having all the text elements inside a g, we can restructure the code as follows:

 svg.append("g")           // create a `g`
    .attr("id","texts")
    .selectAll("text")     // select all the `text` elements in the new `g`
    .data(this.todos)
    .enter()
    .append("text")      // append child `text` elements to the new `g`
    ...

This restructuring also fixes the issue of starting the list at item 2. The function selection.enter() generates an SVG/HTML element for each item in the data array where a corresponding element doesn't already exist. Since we selected an existing rect with selectAll("rect"), the first item in the data array is bound to that rectangle. As there's no need to add an element for the first item since one already exists, selection.enter() doesn't create an element for the first item.

If you want to generate an empty selection to include everything, you can use selectAll(null)

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.append("g")   
         .attr("id","texts")
        .selectAll("text")   
        .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 2

Here is where the issues stem from:

   var items = svg.selectAll("rect")
        .append("g")
        .attr("id", "texts")
        .data(this.todos)
        .enter()
        .append("text")

The problem arises because a rectangle is already appended, so when we select that rectangle and append a g to it with an id of texts, this results in invalid SVG code. To resolve this and achieve our goal of having all the text elements inside a g, we can restructure the code as follows:

 svg.append("g")           // create a `g`
    .attr("id","texts")
    .selectAll("text")     // select all the `text` elements in the new `g`
    .data(this.todos)
    .enter()
    .append("text")      // append child `text` elements to the new `g`
    ...

This restructuring also fixes the issue of starting the list at item 2. The function selection.enter() generates an SVG/HTML element for each item in the data array where a corresponding element doesn't already exist. Since we selected an existing rect with selectAll("rect"), the first item in the data array is bound to that rectangle. As there's no need to add an element for the first item since one already exists, selection.enter() doesn't create an element for the first item.

If you want to generate an empty selection to include everything, you can use selectAll(null)

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.append("g")   
         .attr("id","texts")
        .selectAll("text")   
        .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 3

Answer №2

replace "rect" with "text" for the first item

var items = svg .selectAll("text") // don't use rect

add the following line inside the circle's click event

i[0].parentNode.innerHTML = ""

  var items = svg .selectAll("text")
        .data(this.todos)
        .enter()
        .append("text")
        .style("fill", "#123")
        .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) {
               i[0].parentNode.innerHTML = ""

               var active   = (active) ? false : true,
               newOpacity = active ? 0 : 1;
                console.log(newOpacity)
                d3.select("#list").style("opacity", newOpacity);                    
            });

Answer 4

replace "rect" with "text" for the first item

var items = svg .selectAll("text") // don't use rect

add the following line inside the circle's click event

i[0].parentNode.innerHTML = ""

  var items = svg .selectAll("text")
        .data(this.todos)
        .enter()
        .append("text")
        .style("fill", "#123")
        .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) {
               i[0].parentNode.innerHTML = ""

               var active   = (active) ? false : true,
               newOpacity = active ? 0 : 1;
                console.log(newOpacity)
                d3.select("#list").style("opacity", newOpacity);                    
            });

Design a button in d3.js that toggles the visibility of a rectangle and text

Answer №1

Answer №2

Similar questions

What strategies can I use to eliminate nested loops while constructing a navigation?

Shorten a value within an array of objects using JavaScript

I am in the process of transforming my basic JS Array into one that contains key/value

The compatibility between Javascript and AJAX functions is currently not functioning as expected

Switch navigation - always display the menu on the existing page

Do not allow nested objects to be returned

Can anyone help me figure out the best way to test for observable errors in Angular2?

Encountering npm install failure post updating node version

Enhancing Bootstrap with VueJS for better component ordering

Breaking Down the Process of Exporting a Next.js Static Website into Manageable Parts

Vue: event triggers malfunctioning and components unresponsive

If the checkbox is selected, include an anonymous email in the field and conceal the field

What is the best way to eliminate a particular element from an array produced using the .map() function in

The size of the Webpack bundle grows with each subsequent build

Firing a custom jQuery event when a page loaded via AJAX is complete, ensuring it is triggered

Is it possible to halt the set timeout function in an AJAX call once a specific condition has been satisfied?

Consistently encountering issues when attempting to submit JSON data via POST request (body in raw format

Assign the value of one dropdown menu based on the selected value of another dropdown menu using PHP

Why does my Visual Studio Code always display "building" when I launch an extension?

Discover the nodes with the highest connections in a D3 Force Graph