如何使用d3.js过滤器为元素分配不同的CSS类？

Question

For my first little d3.js project, I am adapting the "Filtering with Data" recipe from the Data Visualization with d3.js Cookbook (available at https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter3/data-filter.html ).

My dataset contains offbeat words paired with types of "animal", "vegetable", or "mineral." The words are displayed in black type when the page is loaded. When the user clicks a "show animals" button, the animal words turn red. Ditto for the other two types: clicking the button for a particular word type turns the corresponding words red. All words currently turn red.

What I'm trying to do, though, is have the words turn different colors based on their type: brown for animals, green for vegetables, gray for minerals. I know I need to build and fit in a conditional framework somewhere, but the specifics are evading me. I imagine this exercise would be easy-peasy in straight Javascript, but I'm trying to learn d3!

Can anybody help?

The relevant CSS:

    .word {
        color: black;
        font-size: 2em;
        line-height: 30%;
        }

    .word .animal {
        color: brown;
        }

    .word.vegetable {
        color: green;
        }

    .word .mineral {
        color: lightslategray;
        }

    .selected {
        color: red;
        }

The entire script (it's rather short):

    var dataset = [
        {name: "aegirine", type: "mineral"},
        {name: "burdock", type: "vegetable"},
        ...
        {name: "yantok", type: "vegetable"},
        {name: "zingel", type: "animal"}
        ];


function render(dataset, type) {

    d3.select("body")
        .select("div")
        .attr("id", "worddiv")
        .selectAll("p.word")
        .data(dataset)
        .enter()
        .append("p")
        .attr("class", "word")
        .text(function(d) {
        return d.name;
        }); 

    d3.select("body")
        .selectAll("p")
        .filter(function (d,i) {

        return d.type == type;
        })

        .classed("selected", true);

    } // end function render


render(dataset);


function select(type) {
     render(dataset, type);
} // end function select


function clearAll() {
    d3.select("body")
        .selectAll("p")
        .attr("class", "word");
        }

The only relevant HTML is in the button div:

<button onclick = "select('animal')">
show animals
</button>

<button onclick = "select('vegetable')">
show vegetables
</button>

<button onclick = "select('mineral')">
show minerals
</button>

<button onclick = "clearAll()">
clear
</button>

Answer 1

You can add a class to each item bassed on the type attribute using the d3.selection.classed method:

function render(dataset, type) {

    d3.select("body")
        .select("div")
        // ... more code
        .text(function(d) { return d.name; }); 

    // Adds a class to each element based on its type
    d3.select('body').selectAll('p.word')
       .each(function(d) { d3.select(this).classed(d.type, true); });

    d3.select("body")
        // ... more code
        .classed("selected", true);

} // end function render

Regards,

Answer 2

When setting the class of all entries to "word", you could also set the type class too:

       .attr("class", function (d) {
           return d.type + " word"
       })

Your css should only colour these items when they also have the selected class:

.word.animal.selected {
    color: brown;
}

For bonus points, before you filter, if you remove the class "selected" from everything, you eliminate the need for a clear button. Just add .classed("selected", false) before the filter.

See this JSfiddle for ref: http://jsfiddle.net/vzmt8ec0/