change class in javascript by d3 select and filter

d3 select by class
d3 select by id
d3 select by attribute
d3 selectall foreach
d3.select(this) not working
d3 select child
d3 filter
d3 append

I have a function like below.

First, I change all class to "badge badge-secondary". Then, check text in span. If it is "right" and clicked, then change to "badge badge-primary". Else, it is "wrong" and clicked, changing to "class", "badge badge-danger".

Can I make my code more concise and righter?

function updateOrderType(ansType) {
    lastAnsType = ansType;
    var ansBadge = d3.select("#anstype").selectAll("span.badge");
    ansBadge.attr("class", "badge badge-secondary");
    ansBadge.filter(function() {
        if (d3.select(this).text() == ansType) {
            return d3.select(this).text() == "right";
        }
    }).attr("class", "badge badge-primary");
    ansBadge.filter(function() { 
        if (d3.select(this).text() == ansType) {
            return d3.select(this).text() == "wrong";
        }
    }).attr("class", "badge badge-danger");
}

Selections, selectAll to select the circles and .style and .attr to modify them: For example to select all elements with class item use d3. A function is usually passed into .​filter which returns true if the element should be included. .filter returns the filtered​  Each 'd' object you are passing to your filter holds all the properties of that circle. If you want to filter on a specific index, you can pass two arguments to filter:.filter(function(d, i) // i is the index return i === 12; }); if you want to filter on a property of d, you need to access it with dot notation or bracket notation.

A simplification of georgina95 answer

function updateOrderType(ansType) {
    var ansBadge = d3.select("#anstype").selectAll("span.badge");

    ansBadge.forEach(function() {
        var oElement = d3.select(this);
        var newClass = "badge badge-secondary";

        if (/**CLICKED**/) {
            var sText = oElement.text();

            if(sText === "right") {
                newClass = "badge badge-primary";
            } else if(sText === "wrong") {
                newClass = "badge badge-danger";
            }
        }
        oElement.setAttribute("class", newClass);
    }
}

d3/d3-selection: Transform the DOM by selecting elements , For example, to set the class and color style of all paragraph elements in the current document: d3.selectAll("p") .attr("class", "graf") .style("color", "red");. d3.select selects the first matching element whilst d3.selectAll selects all matching elements. Each function takes a single argument which specifies the selector string . For example to select all elements with class item use d3.selectAll('.item') .

Thank for all your helping. first, I can't use forEach with d3.select (v4). It's a object which doesn't use attr but setAttribute. So I has to change my code:

function updateOrderType(ansType) {
    d3.select("#ordertype").selectAll("span").each(function() {
        var badgeText = this.textContent;
        if(ansType === badgeText) {
                if(ansType === "right") {
                    this.setAttribute("class", "badge badge-primary");
                } else if (ansType === "wrong") {
                    this.setAttribute("class", "badge badge-danger");
                } else {
                    this.setAttribute("class", "badge badge-secondary");
                }
        } else {
                this.setAttribute("class", "badge badge-secondary");
        } 
    });
}

Data Visualization with JavaScript, The class makes it possible to style the circle uniquely, but a circle's size When D3.js calls an event handler, it sets this equal to the target of the event; we is all it takes to change the clicked node's circle. d3.select(this) .classed("selected", at u we use the D3.js filter() function to limit the selection to the nodes other than  New (different) version of D3 Tips and Tricks publ Applying a colour gradient to an area fill in d3.j Applying a colour gradient to a graph line in d3.j Select items with an IF statement in d3.js; Selecting / filtering a subset of objects in d3.js Adding tooltips to a d3.js graph; Change a line chart into a scatter plot with d3.js

Learn D3.js: Create interactive data-driven visualizations for the , Create interactive data-driven visualizations for the web with the D3.js library With these modules, you can select and filter elements (using CSS selectors), add attributes and contents, change styles or classes, connect event handlers, and  d3.select(“parent child”) Selectors can also utalize AND and OR operators as well. To make a selection of the intersection of two selectors simply place them side by side, while for the union you just put a comma in between them as illustrated below: AND: d3.select(“this that”) OR: d3.select(“this, that”)

Modifying Elements in Selections, Once we have a d3.selection object, we can modify the elements in the selection in unison by value]) - add, remove, and check the existence of CSS classes The argument to each is a function and as with selection.filter , we can pass in a  d3 hasClass. To check for the existence of a class, just leave off the second parameter and pass the class name you're querying for. This will return true if it exists, false if it does not. d3.selectAll(".bar") .classed("my-selector"); This will return true if any element in the selection has the class. Use d3.select for single element selection.

D3 select all child nodes, D3 filter nodes Jan 21, 2019 · I covered off how to create a D3 tree in a SharePoint client web selectAll("p"). js graph; Change a line chart into a scatter plot with d3. Thus, if you call d3. select() The d3. attr('class', 'ghostCircle show'); d3. The filter () method creates an array filled with all array elements that pass a test (provided as a function). Note: filter () does not execute the function for array elements without values. Note: filter () does not change the original array. Browser Support. The numbers in the table specify the first browser version that fully supports the

Comments
  • Further simplification with just one line within the forEach would be: d3.select(this).setAttribute("class", "badge badge-"+(/**CLICKED**/ ? d3.select(this).text() === 'right' ? "primary" : "danger" : "secondary")). I'm a fan of ternary operators and so posted this. :)
  • @Shashank: using multiple ? really needs () to add readability and prevent nasty bugs because it is right-associative.
  • Yes @riov8. Agreed. I do use that a lot and yes I do make sure I use ().